定位(position)

一.固定定位屬性值:fixed

相對于瀏覽器窗口定位

隨著內容一起滾動

二.相對定位屬性值:relative

相對于它本身正常位置發生位置改變

關鍵詞: left / top / right / bottom 來改變位置

特性:?
1) 相對定位元素不脫離文檔流?
2) 相對定位元素不影響元素本身特性?
3) 如果沒有關鍵詞來改變位置,元素本身不會發生任何變化?
4) 位置改變,原來的位置一直占據著

三.絕對定位屬性值:absolute

相對于已經定位的上級元素來發生位置改變?
1) 定位上級包括:fixed?relative?absolute?
2) 沒有上級定位元素參考,相對于body

關鍵詞: left / top / right / bottom

特性:?
1) 完全脫離文檔流?
2) 行內元素支持寬高?
3) margin:auto;無效

四.層級屬性:z-index

五.絕定位元素居中方法

• 關鍵詞都為0,margin:auto;

  div{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; }

• 百分數居中減去定位元素寬高一半

  div{ position:absolute; width:100px; height:100px; left:50%; top:50%; margin-left:-50px; margin-top:-50px; }

• ?

轉載于:https://www.cnblogs.com/fan769875881/p/9852675.html

總結

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

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