一.position屬性定位網頁元素

???1.static ：默認值，沒有定位。按照標準文檔流的方式提現出來

?

???2.relative：相對定位，相對于自身元素原來的位置進行定位

????<style type="text/css">
?????.div01{
??????position: relative;
??????top: -20px;
??????left: 20px;
?????}

????</style>

????注意：當top的值為正值時向下移動
?????? 當為負值時向上移動

?????? 當left的值為正值時向右移動
?????? 當為負值時向左移動

????相對定位的規律：
?????????? 1.設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置
?????????? 2.設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響
?????????? 3.設置相對定位的盒子原來的位置會被保留下來

???3.absolute:絕對定位

?????絕對定位的規律：
????????1.使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移
????????2.如果沒有已經定位的祖先元素，會以瀏覽器窗口為基準進行定位
????????3.絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響
????????4.元素位置發生偏移后，它原來的位置不會被保留下來
?????<style type="text/css">
??????.father{
???????position: relative;
??????}
??????.div02{
???????position: absolute;
???????left: 20px;
??????}
?????</style>

???4.fixed:固定定位：以瀏覽器為基準進行固定定位
?????<style type="text/css">
??????.div02{
???????position: fixed;
???????bottom: 0px;
???????right: 0px;
??????}
?????</style>
????類似絕對定位，不過區別在于定位的基準不是祖先元素，而是瀏覽器窗口

???5.定位總結：
?????5.1 相對定位的特性
??????相對于自己的初始位置來定位
??????元素位置發生偏移后，它原來的位置會被保留下來
??????層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊
?????5.2 相對定位的使用場景
??????相對定位一般情況下很少自己單獨使用，都是配合絕對定位使用，為絕對定位創造定位父級而又不設置偏移量

?????5.3 絕對定位的特性
??????絕對定位是相對于它的定位父級的位置來定位，如果沒有設置定位父級，則相對瀏覽器窗口來定位
??????元素位置發生偏移后，原來的位置不會被保留
??????層級提高，可以把標準文檔流中的元素及浮動元素蓋在下邊
??????設置絕對定位的元素脫離文檔流
?????5.4 絕對定位的使用場景
??????一般情況下，絕對定位用在下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景

?????5.5 固定定位的特性
??????相對瀏覽器窗口來定位
??????偏移量不會隨滾動條的移動而移動
?????5.6 固定定位的使用場景
??????一般在網頁中被用在窗口左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等

?二.z-index：調整元素定位時重疊層的上下位置

??z-index屬性值：整數，默認值為0
??設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關系
??z-index值大的層位于其值小的層上方

???1.設置透明度
????opacity:x?x值為0~1，值越小越透明?opacity:0.4;
????filter:alpha(opacity=x)?x值為0~100，值越小越透明?filter:alpha(opacity=40);

?

轉載于:https://www.cnblogs.com/1314Justin/p/9216263.html

總結

以上是生活随笔為你收集整理的定位网页元素的解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。