三種布局方式: 文件流、浮動布局、層布局(定位)
1、靜態定位(不定位) position:static;
靜態定位的元素按照文件流內的位置排列
2、相對定位 position:relative;
偏移參考元素:離絕對定位的元素最近的帶有position屬性的祖先元素, 如果不存在就是相對body定位
會脫離文件流
4、固定定位position:fixed;
偏移參考位置:瀏覽器可視視窗
會脫離文件流
5、z-index 調整定位元素的層級
定位的元素才能使用z-index
多個定位的元素預設按照順序決定層級,越靠後層級越高
通過z-index屬性可以改變層級,預設z-index值為0 ,數字越大層級越高
6、位置偏移屬性:
top: 距離參考位置頂部的偏移 正值向下 負值向上
bottom : 距離參考位置低部的偏移 正值向上 負值向下
left: 距離參考位置左邊的偏移 正值向右 負值向左
right : 距離參考位置右邊的偏移 正值向左 負值向右
float:left
float:right
position:absolute
position:fixed
1、通過絕對定位,給left和top都設定為50%,再通過margin-left:向左移動寬度的一半,margin-top:向上移動寬度的一半
.inner
2、通過絕對定位,left/right/top/bottom的值都是0,margin:auto;
.inner
前端自學筆記06
1 學習目標 能寫出全部清除浮動的方式 能簡述定位的使用場景 能說出3種定位的特點 能寫出絕對定位的盒子居中的 能夠說出子絕父相的使用目的 為什麼沒有清除定位卻有清除浮動?因為定位有子絕父相,父盒子 會把位置佔好。2 定位模式轉換 3 css高階技巧 隱藏物件 display block 顯示某個元...
大前端學習筆記(2)
在學習各種自己哥哥接觸的東西時同情況下都是不知道如何下手,這個是最近這兩天的學習目標和大綱 目前自己的一種比較老套的學習方法。布局無布局 文字文字 列表 字型 斜體 粗體 下劃線 上標 下標 列表 1 ul 無序列表 ol 有序列表 dl 定義列表 2 列表巢狀 布局 table tr td 1.行...
Web前端學習 06
今天寫頁面的時候,在定位側面的固定欄的時候遇到了一些小問題 我給它加了fixed定位 然後測試的時候發現當我縮放瀏覽器時這個div會往右上偏移 因為我只是單純的用了top xx px right xx px 之後審查jd頁面後發現 在乙個頁面中實現乙個固定導航欄的話,需要先將其固定在頁面中心位置 t...