使用CSS定位HTML元素的實現方法

  發布時間:2022-07-05 16:46:11   作者:allway2   我要評論
在頁面上定位內容時,可以使用一些屬性來幫助您操縱元素的位置,本文主要介紹了使用CSS定位HTML元素的實現方法,主要有五種類型,感興趣的可以了解一下

在頁面上定位內容時,可以使用一些屬性來幫助您操縱元素的位置。本文將向您展示一些使用 CSSposition 屬性包含不同定位元素類型的示例。要在元素上使用定位,您必須首先聲明它的 position property,它指定用于元素的定位方法的類型。使用 position 屬性值,使用 top、bottom、left 和 right 屬性定位元素。它們的工作方式也不同,具體取決于它們的位置值。

定位值有五種類型:

  • 靜止的
  • 相對的
  • 固定的
  • 絕對

靜止的

HTML元素默認是靜態定位的,元素按照文檔的正常流程定位;靜態定位元素不受 top、bottom、left 和 right 屬性的影響。具有位置的元素:靜態;沒有以任何特殊方式定位

用于將位置設置為靜態的 CSS 是:

position: static; 

接下來是使用靜態位置值的示例:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: WHITE;
  font:  Helvetica;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  position: static;
  background: Green;
  height: 70px;
  line-height: 40px;
  text-align: center;
  width: 90px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

相對的

元素根據文檔的正常流程定位,相對于其正常位置進行定位,然后 根據頂部、右側、底部和左側的值相 對于自身進行偏移。偏移量不影響任何其他元素的位置;因此,頁面布局中為元素指定的空間與位置是靜態的相同。設置相對定位元素的 top、right、bottom 和 left 屬性將導致它被調整遠離其正常位置。其他內容不會被調整以適應元素留下的任何間隙。

用于將位置設置為相對的 CSS 是:

position: relative; 

下面的示例使用相對位置值:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: white;
  font:   Helvetica ;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  background: green;
  height: 70px;
  line-height: 40px;
  position: relative; 
  text-align: center;
  width: 80px;
}
.square-1 {
    top: 15px;
  }
.square-2 {
  left: 50px;
}
.square-3 {
  bottom: -23px;
  right: 30px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

絕對

該元素將從正常的文檔流中移除,并且在頁面布局中,不會為該元素創建空間。元素相對于最近的定位祖先(如果有的話)定位;否則,它相對于初始包含塊放置,其最終位置由頂部、右側、底部和左側的值確定。

用于將位置設置為絕對的 CSS 是:

position: absolute; 

一個元素position: absolute; 相對于最近定位的祖先進行定位。如果絕對定位元素沒有定位的祖先,它使用文檔正文,并與頁面滾動一起移動。“定位”元素的位置不是static.

下一個例子強調元素的絕對位置:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: WHITE;
  background: darkgrey;
  height: 200px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica ;
  width: 420px;
}
.square {
  background: green;
  height: 80px;
  position: absolute;
  width: 80px;
  border-radius: 15px;
  line-height: 60px;
}
.square-1 {
  top: 10%;
  left: 6%;
}
.square-2 {
  top: 5;
  right: -20px;
}
.square-3 {
  bottom: -15px;
  right: 40px;
}
.square-4 {
  bottom: 0;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

固定的

從正常文檔流中刪除的元素,并且在頁面布局中,沒有為元素創建空間。元素相對于由視口建立的初始包含塊定位,其最終位置由值 top、right、bottom 和 left 確定。此值始終創建一個新的堆疊上下文。

用于將位置設置為固定的 CSS 如下所示:

position: fixed; 

元素position: fixed; 相對于視口定位,這意味著即使頁面滾動,它也始終保持在同一位置。top、right、bottom 和 left 屬性用于定位元素。

元素按照文檔的正常流程定位,然后根據top、right、bottom和left的值,相對于其最接近的升序塊級進行偏移,包括與表格相關的元素。偏移量不會影響任何其他元素的位置。

此值始終創建一個新的堆疊上下文。請注意,粘性元素“粘”到其最近的具有“滾動機制”的祖先,即使該祖先不是最近的實際滾動祖先。

用于將位置設置為粘性的 CSS 是:

position: sticky;

元素position: sticky; 的定位基于用戶的滾動位置,relative 并fixed 根據滾動位置在位置之間切換。

重疊元素

網頁上的重疊元素對于突出、宣傳和關注我們網頁上的重要內容非常有用。使元素覆蓋在您的網站上是非常有用且非常有價值的功能設計實踐。當元素被定位時,它們可以與其他元素重疊,所以要指定順序(什么元素應該放在其他元素的前面或后面),我們應該使用 z-index 屬性。具有較大堆棧順序的元素始終位于具有較低堆棧順序的元素之前。請注意,z-index 屬性僅適用于定位元素(位置:絕對、位置:相對或位置:固定)。

下一個示例顯示 z-index 屬性如何在不同的正方形上工作:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: white;
  background: purple;
  height: 170px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica;
  width: 400px;
}
.square {
  background: orange;
  border: 4px solid goldenrod;
  position: absolute;
  border-radius: 15px;
  height: 80px;
  width: 80px;
}
.square-1 {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.square-2 {
  position: absolute;
  z-index: 2; 
  background: black;
  width: 65%;
  left: 60px;
  top: 3em;
}
.square-3 {
  position: absolute;
  z-index: 3; 
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
 
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
</div>
</body>
</html>

在圖像上定位文本

下面的示例使用上述 CSS 定位值在圖像上覆蓋一些文本:

<!DOCTYPE html>
<html>
<head>
<style>
.module{
  background: 
    linear-gradient{
      rgba(0, 4, 5, 0.6),
      rgba(2, 0, 3, 0.6)
    ),
    url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
  background-size: cover;
  width: 600px;
  height: 400px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.mid h3 {
  font-family: Helvetica;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 3rem;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="module mid">
  <h3>Wild nature</h3>
</div>
</body>
</html>

結論

在本文中,我們描述并給出了 CSS 定位類型的示例,并描述了如何重疊元素并在圖像上添加一些文本。

到此這篇關于使用CSS定位HTML元素的實現方法的文章就介紹到這了,更多相關CSS定位HTML元素內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • 使用CSS定位HTML元素的實現方法

    在頁面上定位內容時,可以使用一些屬性來幫助您操縱元素的位置,本文主要介紹了使用CSS定位HTML元素的實現方法,主要有五種類型,感興趣的可以了解一下
    2022-07-05
  • CSS 實現角標效果的完整代碼

    這篇文章主要介紹了CSS 實現角標效果,分為圓角矩形和三角形,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-28
  • CSS的calc函數用法小結

    CSS3新增的函數中有一個非常好用的函數,就是calc()函數,用過的都說好,這篇文章我們來嘮一老calc函數,感興趣的朋友一起看看吧
    2022-06-23
  • CSS SandBox應用場景及常見問題

    本篇文章主要介紹的是關于CSS Sandbox的一些事情,主要包括應用場景分析及場景問題的解決方法,需要的朋友跟隨小編一起看看吧
    2022-06-22
  • 使用CSS自定義屬性實現骨架屏效果

    這篇文章主要介紹了使用CSS自定義屬性實現骨架屏效果,在網上可以看到骨架屏的使用已經非常廣泛,Facebook,Google,Slack等公司都在使用,本文通過示例代碼給大家介紹的非
    2022-06-20
  • css中有哪些方式可以隱藏頁面元素及區別

    在平常的樣式排版中,我們經常遇到將某個模塊隱藏的場景,本文主要介紹了css中有哪些方式可以隱藏頁面元素及區別,具有一定的參考價值,感興趣的可以了解一下
    2022-06-14
  • css如何把元素固定在容器底部的四種方式

    本文主要介紹了css如何把元素固定在容器底部的四種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起
    2022-06-14
  • CSS控制繼承中的height能變為可繼承嗎

    這篇文章主要介紹了CSS控制繼承中的height能變為可繼承嗎,我們知道,CSS 屬性有可繼承和不可繼承之分, height 和 width 就是CSS 中典型的不可繼承屬性,文章圍繞主題展開
    2022-06-06
  • 基于CSS制作創意端午節專屬加載特效

    本文給大家分享的是一個css創意特效端午加載動畫,想法是讓粽葉,糯米,紅棗繞圓旋轉,然后聚集起來融合后變成一個可愛的小粽子的效果,對css加載特效實現代碼感興趣的朋友
    2022-05-31
  • 聊聊CSS粘性定位sticky案例解析

    這篇文章主要介紹了關于CSS粘性定位sticky,粘性定位可以被認為是相對定位和固定定位的混合,它主要用在對 scroll 事件的監聽上,對CSS粘性定位sticky相關知識感興趣的朋友
    2022-05-31

最新評論

美丽人妻被按摩中出中文字幕