詳解CSS中position的4種屬性(fixed |absolute | relative

首頁

web前端

css教學

詳解CSS中position的4種屬性(fixed |absolute | relative | static )

怪我咯

Jun 22, 2017 am 09:37 AM

cssfixedposition屬性詳解

我們先來看看CSS3 中對position屬性的相關定義：

static：無特殊定位，物件遵循正常文檔流。 top，right，bottom，left等屬性不會被套用。
relative：物件遵循正常文件流，但將依據top，right，bottom，left等屬性在正常文件流中偏移位置。而其層疊透過z-index屬性定義。
absolute：物件脫離正常文件流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊透過z-index屬性定義。
fixed：物件脫離正常文件流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現捲軸時，物件不會隨著捲動。而其層疊透過z-index屬性定義。

怎麼樣，是不是還是很迷糊~~ 沒關係，以下就從幾個基礎概念一一給大家詳述：

什麼是文檔流？

將窗體自上而下分成一行行, 並在每行中按從左到右的順序排放元素,即為文檔流。

只有三種情況會使元素脫離文檔流，分別是：浮動、絕對定位和相對定位。

靜態定位(static) ：

static，無特殊定位，它是html元素預設的定位方式，也就是我們不設定元素的position屬性時預設的position值就是static，它遵循正常的文檔流對象，對象佔用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

相對定位(relative) ：

relative定位，又稱為相對定位，從字面上解析，我們就可以看出該屬性的主要特性：相對。但是它相對的又是相對於什麼地方而言的呢？這是重點，也是最讓我迷糊的一個地方，現在讓我們來做個測試，我想大家都會明白的：

(1) 初始未定位

/******初始*********/
<style type="text/css">
    #first { width: 200px; height: 100px; border: 1px solid red; }
    #second{ width: 200px; height: 100px; border: 1px solid blue;}
</style>
<body>
   <p id="first"> first</p>
   <p id="second">second</p>
</body>

初始原圖：

(2) 我們修改first元素的position屬性：

<style type="text/css">
    #first{ width: 200px; height: 100px; border: 1px solid red; position: relative; top: 20px; left: 20px;} /*add position*/
    #second{width: 200px; height: 100px; border: 1px solid blue;}
</style>

相對偏移20px後：

# -- >> 虛線是初始的位置空間

現在明白了吧，相對定位相對的是它原本在文檔流中的位置而進行的偏移，而我們也知道relative定位也是遵循正常的文檔流，它沒有脫離文檔流，但是它的top/left/right/bottom屬性是生效的，可以說它是static到absoult的一個中間過渡屬性，最重要的是它還佔有文檔空間，而且佔據的文檔空間不會隨top / right / left / bottom 等屬性的偏移而發生變動，也就是說它後面的元素是依據虛線位置( top / left / right / bottom 等屬性生效之前)進行的定位，這點一定要理解。

那好，我們知道了top / right / left / bottom 屬性是不會對relative定位的元素所佔據的文檔空間產生偏移，那麼margin / padding會讓該文檔空間產生偏移嗎？答案是肯定的，我們一起來做個試驗：

(3) 新增margin屬性：

<style type="text/css">
    #first{width: 200px;height: 100px;border: 1px solid red;position: relative;top: 20px;left: 20px;margin: 20px;} /* add margin*/
    #second{width: 200px;height:100px;border: 1px solid blue;}
</style>

設定margin：20px後：

比較一下，是不是就很清楚了，我們先將first元素外邊距設為20px，那麼second元素就得向下偏移40px，所以margin是佔據文檔空間！同理，大家可以自己動手測padding的效果吧！

絕對定位(absoulte) ：

absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和

元素相差9px左右。我们来看下效果：

(4) 添加absoulte属性：

<html>
<style type="text/css">
    html{border:1px dashed green;}
    body{border:1px dashed  purple;}
    #first{ width: 200px;height: 100px;border: 1px solid red;position: relative;}
    #second{ width: 200px;height: 100px;border: 1px solid blue;position: absolute;top :0;left : 0;}
</style>
<body>
  <p id="first">relative</p>
  <p id="second">absoult</p>
</body>
</html>

效果图：

哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

如果top和bottom一同存在的话，那么只有top生效。
如果left和right一同存在的话，那么只有left生效。

既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

(5) 在absoulte定位中添加margin / padding属性：

#first{width: 200px;height: 100px;border: 1px solid red;position: relative;margin:40px;padding:40px;}
#second{width: 200px;height:100px;border: 1px solid blue;position: absolute;top:20px;left:20px;}
   
<p id="first">first
    <p id="second">second</p>
</p>

效果图：

看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

固定定位(fixed)：

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移。

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。

以上是詳解CSS中position的4種屬性(fixed |absolute | relative | static )的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn