CSS定位元素有3種方式 ：普通流、相對(duì)位置、絕對(duì)位置。通過設(shè)置position屬性來實(shí)現(xiàn)。
| inherit | 繼承父元素position 屬性的值。 |
static |
默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
relative |
生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位。因此， "left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。 |
absolute |
生成絕對(duì)定位的元素，找到第一個(gè)非static的祖先元素進(jìn)行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
fixed |
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位 置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
普通流定位是：static,默認(rèn)定位 相對(duì)位置定位是：relative 相對(duì)于該
元素本身作為普通流的位置，占有文檔流的原來位置
絕對(duì)位置定位有2種：absolute和fixed，一個(gè)是相對(duì)自己的第一個(gè)非st
atic祖先元素，一個(gè)是相對(duì)瀏覽器窗口，都不占有原來的文檔流位置
例子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相對(duì)位置,綠色div相對(duì)static的位置向右和向下移動(dòng)了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絕對(duì)位置(不占有原來的文檔流位置)，沒有指定父元素div的position屬性， 則綠色div的父級(jí)div是static定位，所以不選這個(gè)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絕對(duì)位置，父級(jí)div的position是relative，不再是static，所以選父級(jí)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絕對(duì)位置，相對(duì)于窗口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>
【 微信掃一掃 】
