免費外貿(mào)網(wǎng)站國際新聞最新消息2022
? ? ? position 屬性規(guī)定元素的定位類型，定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。
? ? ?position一般分為三種，一種是相對定位relative，一種是絕對定位absolute，一種是固定定位fixed，接下來分別說明這三個屬性的用法以及相對應(yīng)的特性，并舉例說明。
1、position：relative ?相對定位
特點：
? ? ?1）不影響元素本身的特性；
? ? ?2）不使元素脫離文檔流（元素移動之后原始位置會被保留）；
? ? ?3）如果沒有定位偏移量，對元素本身沒有任何影響；
? ? ?4）提升層級。
注：定位元素位置控制：top/right/bottom/left ?定位元素偏移量
2、position：absolute ?絕對定位
特點：
? ? ?1）使元素完全脫離文檔流；
? ? ?2）使內(nèi)嵌支持寬高；
? ? ?3）塊屬性標(biāo)簽內(nèi)容撐開寬度；
? ? ?4）如果有定位父級相對于定位父級發(fā)生偏移，沒有定位父級相對于document發(fā)生偏移；
? ? ?5）相對定位一般都是配合絕對定位元素使用；
? ? ?6）提升層級
注意：
z-index:[number]； ?定位層級
? ? ? a、定位元素默認(rèn)后者層級高于前者；
? ? ? b、建議在兄弟標(biāo)簽之間比較層級
接下來用一個例子進(jìn)行使用說明。
例子要求：如何將左邊的三個div變成右邊的三個div布局，即將div2的位置移動到如圖的位置。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{position: relative;}div{width: 100px;height: 100px;}.div1{background-color: pink;}.div2{background-color: yellow;position: absolute;left: 100px;top: 200px;}.div3{background-color: green;position: absolute;top:200px;}</style>
</head>
<body><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div>
</body>
</html>這里做幾點解釋：
1）為什么body需要添加position：relative?
? ? ?因為position：absolute這個屬性會根據(jù)父級進(jìn)行定位，如果沒有定位父級則會相對于document發(fā)生偏移。而body在chrome瀏覽器中帶有默認(rèn)的樣式，即帶有margin屬性，所以需要給body定義定位，這樣后面的div就會根據(jù)body進(jìn)行定位。
2）為什么div3中也需要添加position：absolute?
? ? ? 因為div2中添加屬性position：absolute之后，就直接完全脫離文檔流，那么div3的位置就會往上移動，為了實現(xiàn)效果，也需要在div3中添加同樣的屬性。
3、position：fixed ?固定定位
? ? ?與絕對定位的特性基本一致，唯一的差別是始終相對整個文檔進(jìn)行定位；
? ? ?問題：IE6不支持固定定位；
4、其他定位
? ? ?position:static ； 默認(rèn)值
? ? ?position:inherit ; ?從父元素繼承定位屬性的值 (不兼容)、
5、綜合例子說明
? ? ?做一個類似的彈窗效果。
代碼：
我用了兩種方法實現(xiàn)，一種就是上面總結(jié)的，都是利用div和position定位實現(xiàn)的，一種就是直接利用box-shadow屬性實現(xiàn)的.
1)利用div和position定位實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>優(yōu)酷彈幕</title><style>div{width:300px;height:300px;}.box{margin:100px auto;position: relative;}.content{background-color: green;position: absolute;left:-3px;top:-3px;z-index: 2;}.mark{background-color: #0c1315;position: absolute;right: -6px;bottom: -6px;z-index: 1;opacity: 0.5;}</style>
</head>
<body><div class="box"><div class="content"></div><div class="mark"></div></div>
</body>
</html>其中用到了三個比較重要的屬性：
? ? ? ?a】position ?定位
? ? ? ?b】z-index ?定位層級
? ? ? ?c】opacity 透明度
? ? ? ? ? ? ? 標(biāo)準(zhǔn) 不透明度： ?opacity:0~1;?
? ? ? ? ? ? ? IE 濾鏡： ? ? ? ? ? filter:alpha(opacity=0~100);?
? ? ? ?box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>優(yōu)酷彈幕2</title><style>.box{width:300px;height:300px;margin:100px auto;background-color: green;box-shadow:6px 6px 0px #727272;}</style>
</head>
<body><div class="box"></div>
</body>
</html>