CSS中五種常見定位方式詳解

發(fā)布時(shí)間：2024-04-22 09:32:53 作者：溫暖前端

我要評(píng)論

這篇文章主要為大家詳細(xì)介紹了CSS中五種常見定位方式以及它們的具體應(yīng)用，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟小編一起學(xué)習(xí)一下

有哪五種定位

1. CSS的position屬性值

static：默認(rèn)值，元素在正常的文檔流中，不會(huì)被特別定位。
relative：相對(duì)于元素在文檔流中的初始位置進(jìn)行定位的。
absolute：相對(duì)于最近的已定位（非static）祖先元素定位。
fixed：相對(duì)于瀏覽器窗口定位，即使窗口滾動(dòng)，元素也會(huì)停留在指定位置。
sticky：基于滾動(dòng)位置在relative和fixed定位之間切換。

定位方式	絕對(duì)定位	相對(duì)定位	固定定位	粘性定位	靜態(tài)定位
定位原點(diǎn)	相對(duì)于最近的已定位祖先元素	相對(duì)于元素自身在文檔流中的位置	相對(duì)于瀏覽器窗口	相對(duì)于最近的定位上下文	元素在正常文檔流中的位置
位置參考	相對(duì)于已定位的祖先元素	相對(duì)于元素自身原始位置	瀏覽器窗口	相對(duì)于最近的定位上下文	文檔流中的位置
滾動(dòng)影響	隨著頁面滾動(dòng)而移動(dòng)	隨著頁面滾動(dòng)而移動(dòng)	固定在瀏覽器窗口某個(gè)位置	隨著頁面滾動(dòng)而移動(dòng)，滾動(dòng)到一定距離則不滾動(dòng)	隨著頁面滾動(dòng)而移動(dòng)
元素位置調(diào)整	通過top、right、bottom、left屬性	通過top、right、bottom、left屬性	通過top、right、bottom、left屬性	通過top、right、bottom、left屬性	不可調(diào)整

2. 用于定位元素的屬性

top, right, bottom, left：這些屬性用于指定元素相對(duì)于其包含塊（通常是父元素）的位置。它們只對(duì)使用了相對(duì)定位、絕對(duì)定位、固定定位或粘性定位的元素有效。

z-index：指定元素的堆疊順序。數(shù)值越大，元素越靠上。具有更高z-index值的元素會(huì)顯示在具有較低z-index值的元素上方。

3. 定位類型詳解及示例

1. 靜態(tài)定位

默認(rèn)的定位方式。元素按正常的文檔流進(jìn)行排列，不會(huì)因?yàn)槎ㄎ粚傩远淖兾恢?。此時(shí)，top、right、bottom、left和z-index屬性將不會(huì)有任何效果。

2. 相對(duì)定位

允許你根據(jù)元素本身的原始位置進(jìn)行調(diào)整。它不會(huì)脫離文檔流，但會(huì)讓空間保留在原來的位置。

.relative-box {
  position: relative;
}

3. 絕對(duì)定位

元素脫離了文檔流，其位置是相對(duì)于最近的定位祖先確定的。如果沒有定位祖先，它將相對(duì)于文檔的初始邊界進(jìn)行定位。

.absolute-box { 
  position: absolute;
}

4. 固定定位

元素相對(duì)于視窗進(jìn)行定位，因此滾動(dòng)頁面時(shí)，它的位置不會(huì)改變。通過固定定位，可以創(chuàng)建固定在頁面某個(gè)位置的元素，比如導(dǎo)航欄或懸浮廣告。

.fixed-box {
  position: fixed;
}

5. 粘性定位

結(jié)合了相對(duì)和固定定位的特性。當(dāng)頁面滾動(dòng)到特定位置時(shí)，粘性元素會(huì)“粘住”視窗的某個(gè)位置。元素在跨越特定閾值前是相對(duì)定位的，之后變?yōu)楣潭ǘㄎ?。這種定位方式常用于創(chuàng)建滾動(dòng)時(shí)固定在頁面頂部或底部的元素，比如導(dǎo)航欄。

.sticky-box { 
  position: sticky;

4. 注意事項(xiàng)

1. 影響文檔流

絕對(duì)定位和固定定位會(huì)使元素脫離正常文檔流，這可能會(huì)影響其他元素的布局。

2. 堆疊順序

使用 z-index 控制元素的堆疊順序時(shí)要小心，確保不會(huì)出現(xiàn)意外的覆蓋情況。

3. 性能

使用大量定位元素可能會(huì)影響頁面的性能，特別是在移動(dòng)設(shè)備上。

4. 兼容性

不同瀏覽器對(duì)定位屬性的解釋可能略有不同，需要進(jìn)行測試以確保在各種瀏覽器中的兼容性。

5. 滾動(dòng)條

使用固定定位時(shí)要注意，元素固定在瀏覽器視窗中，可能會(huì)導(dǎo)致長內(nèi)容的頁面出現(xiàn)不必要的滾動(dòng)條。

5. 實(shí)際運(yùn)用

1. 子絕父相

父元素 .parent 設(shè)置相對(duì)定位，而子元素 .child 則設(shè)置絕對(duì)定位，并通過 top 和 left 屬性將其定位在父元素的中心。通過 transform: translate(-50%, -50%); 來使子元素在垂直和水平方向上都居中。這樣，子元素相對(duì)于父元素進(jìn)行絕對(duì)定位，即子絕父相。

HTML 代碼：

<div class="parent">
  <div class="child">
    子元素
  </div>
</div>

CSS 代碼：

.parent {
  position: relative; /* 父元素設(shè)置相對(duì)定位 */
  width: 300px;
  height: 200px;
}
.child {
  position: absolute; /* 子元素設(shè)置絕對(duì)定位 */
  top: 50%; /* 相對(duì)于父元素的50%處垂直定位 */
  left: 50%; /* 相對(duì)于父元素的50%處水平定位 */
  transform: translate(-50%, -50%); /* 通過平移來使子元素居中 */
}

2. 吸頂效果

要實(shí)現(xiàn) CSS 中的吸頂效果，可以使用 position: sticky 屬性。這個(gè)屬性可以使元素在滾動(dòng)到特定位置時(shí)固定在頁面上，就像是吸附在頂部一樣。

.header 元素使用 position: sticky;，并且設(shè)置 top: 0; 以確保它固定在頁面頂部。當(dāng)滾動(dòng)頁面時(shí)，.header 將保持在視口的頂部

<div class="header">這是一個(gè)吸頂頭部</div>
<div class="container">
  <p>這是頁面的內(nèi)容。當(dāng)滾動(dòng)頁面時(shí)，頭部會(huì)固定在頂部。</p>
</div>

<style>
  .container {
    width: 100%;
    height: 1500px; /* 用于演示滾動(dòng)效果 */
    padding-top: 50px; /* 讓內(nèi)容不被固定的頭部遮擋 */
  }
  .header {
    position: -webkit-sticky; /* 兼容性寫法 */
    position: sticky;
    top: 0; /* 在頂部固定 */
    background-color: #333;
    z-index: 1000; /* 如果有其他元素在頂部需要覆蓋，則可以使用 z-index */
  }
</style>

到此這篇關(guān)于CSS中五種常見定位方式詳解的文章就介紹到這了,更多相關(guān)CSS定位方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！