CSS定位元素有3種方式 ：普通流、相對位置、絕對位置。通過設(shè)置position屬性來實現(xiàn)。
| inherit | 繼承父元素position 屬性的值。 |
static |
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
relative |
生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位。因此， "left:20" 會向元素的 LEFT 位置添加 20 像素。 |
absolute |
生成絕對定位的元素，找到第一個非static的祖先元素進(jìn)行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
fixed |
生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位 置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
普通流定位是：static,默認(rèn)定位 相對位置定位是：relative 相對于該
元素本身作為普通流的位置，占有文檔流的原來位置
絕對位置定位有2種：absolute和fixed，一個是相對自己的第一個非st
atic祖先元素，一個是相對瀏覽器窗口，都不占有原來的文檔流位置
例子1：static普通流定位，紅色div的top屬性失效
<body> <div style="border: solid 1px #0e0; width: 200px;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; "></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div> </body>
例子2：relative相對位置,綠色div相對static的位置向右和向下移動了20px，綠色div原來的文檔位置還在。
<body> <div style="border: solid 1px #0e0; width: 200px;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; position:relative; top:20px; left:20px;"></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div> </body>
例子3.1：absolute絕對位置(不占有原來的文檔流位置)，沒有指定父元素div的position屬性， 則綠色div的父級div是static定位，所以不選這個div做參照，選window作為參照
<body> <div style="border: solid 1px #0e0; width: 200px;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div> </body>
例子3.2：absolute絕對位置，父級div的position是relative，不再是static，所以選父級div為參考。
<body> <div style="border: solid 1px #0e0; width: 200px; position:relative;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div> </body>
例子4：fixed絕對位置，相對于窗口window的，不占文檔流位置。
<body> <div style="border: solid 1px #0e0; width: 200px; position:relative;"> <div style="height: 100px; width:100px; background-color:red; top:20px;"></div> <div style="height:100px; width:100px; background-color:green; position:fixed; bottom:20px; left:20px; "></div> <div style="height:100px; width:100px; background-color:blue;"></div> </div> </body>
【 微信掃一掃 】
