用Position屬性進行定位 · 隨堂筆記-Java99班-20171115

## CSS position屬性 CSS 有三種基本的定位機制：普通流、浮動和絕對定位。我們已經學習了普通流和浮動的相關內容，本節我們介紹定位相關內容。 position屬性設置元素定位類型，可以通過top,bottom,right,left屬性，控制元素的定位位置。 position屬性值有static，relative，absolute，fixed四個值。 ### static靜態定位 HTML元素的默認值，即沒有定位，元素出現在正常的流中。靜態定位的元素不會受到top,bottom,right,left屬性的影響。 ### fixed固定定位 * 脫離標準流，在頁面中不占位置。 * 不管頁面有多大，永遠相對于瀏覽器的邊框來定位。 ```css *{ margin: 0; padding: 0; } .c1{ width: 100px; height: 100px; background-color: brown; } .c2{ width: 100px; height: 100px; background-color: blue; } .c3{ width: 100px; height: 100px; background-color: black; position: fixed;/*固定定位，不占位置，永遠相對于瀏覽器來定位，不管窗口上下拉動，都不會消失（如廣告位）*/ left:20px; top:20px; } ``` ```html <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>... </body> ``` ### relative 相對定位 * 不脫離標準流，在頁面中占位置。 * 相對于自己原來的位置來進行定位。 ```css *{ margin: 0; padding: 0; } .c1{ width: 100px; height: 100px; background-color: brown; } .c2{ width: 100px; height: 100px; background-color: blue; position: relative;/*相對定位，占位置，相對于自己原來的位置定位*/ left: 20px; top:20px; } .c3{ width: 100px; height: 100px; background-color: black; } ``` ```html <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> ``` ### absolute絕對定位 * 脫離標準流，在頁面中不占位置（浮起來）。 * 如果沒有父元素，則相對于body定位；如果有父元素，但父元素沒有定位，那么還是相對于body定位；如果父元素有定位，那么相對于父元素來定位。 ```css *{ margin: 0; padding: 0; } .c1{ width: 100px; height: 100px; background-color: brown; position: absolute;/*絕對定位，不占位置，無父級定位則相對于body來定位*/ left:20px; top:20px; } .c2{ width: 100px; height: 100px; background-color: blue; } .c3{ width: 100px; height: 100px; background-color: black; } ``` ```html <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> ``` ### 定位元素的重疊 * `z-index`屬性控制定位元素的重疊順序，屬性值是z軸上的值。 * `z-index`只能在絕對定位元素上奏效（position:absolute）。 * `z-index`的值是設置一個定位元素沿Z軸的位置，其值越大，離用戶越近，所以若兩個定位元素，`z-index`值越大的將會覆蓋值越小的定位元素。默認值是0，可以是正負數。下面首先不設置z-index。 ```css .c1{ width: 100px; height: 100px; background-color: black; position: absolute; left:20px; top:20px; } .c2{ width: 50px; height: 50px; background-color:blue; position: absolute; } ``` 效果是：藍色定位元素在黑色定位元素上面加Z-index，使得黑色定位元素在藍色上面。 ```css c1{ width: 100px; height: 100px; background-color: black; position: absolute; left:20px; top:20px; z-index: 1;/*值只要比另一個定位元素的值大，就會在另一個定位元素之上*/ } .c2{ width: 50px; height: 50px; background-color:blue; position: absolute; z-index: 0; } ```