创建布局
一、定位內容
1、position和top
position 屬性規定元素的定位類型。這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，使用absolute和fixed定位的元素會表現的像inline-block元素，使用fixed定位的元素表現的原本一樣。absolute和fixed定位會是元素脫離文檔流。
top、bottom、left、right用來為定位元素設置偏移量。
top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
注釋：如果 "position" 屬性的值為 "static"，那么設置 "top" 屬性不會產生任何效果。
對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數值，為指定值；否則為 auto。
對于相對定義元素，如果 top 和 bottom 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數。
其他三個和top類似；
2.absolute
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 img{
8 position: absolute;
9 top:30px;
10 left: 40px;
11 }
12 </style>
13 </head>
14 <body>
15 <p>元素定位</p>
16 <img src="1.png" alt="">
17 <p>元素定位</p>
18 </body>
19 </html>
absolute值會根據position值不是static的最近祖先元素來定位，上例不存在這樣的元素，所以會相對于body元素來定位。后面的元素會向上浮動。
3.relative
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 img{ 8 position: relative; 9 top:30px; 10 left: 40px; 11 } 12 </style> 13 </head> 14 <body> 15 <p>元素定位</p> 16 <img src="1.png" alt=""> 17 <p>元素定位</p> 18 </body> 19 </html>
relative值會相對于position值為static的自身元素來定位。后面元素不會浮動。
當relative定位元素超出父元素的范圍，我們可以使用overflow: hidden來隱藏。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 border: 1px solid darkred; 9 background: #ccc; 10 } 11 .div1{ 12 position: relative; 13 top:50px; 14 } 15 .div2{ 16 text-indent: 2em; 17 } 18 section{ 19 border: 2px solid black; 20 } 21 </style> 22 </head> 23 <body> 24 <section> 25 <div class="div1">hello</div> 26 <div class="div2">hello world</div> 27 </section> 28 </body> 29 </html>
對section使用overflow后。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 border: 1px solid darkred; 9 background: #ccc; 10 } 11 .div1{ 12 position: relative; 13 top:50px; 14 } 15 .div2{ 16 text-indent: 2em; 17 } 18 section{ 19 border: 2px solid black; 20 overflow: hidden; 21 } 22 </style> 23 </head> 24 <body> 25 <section> 26 <div class="div1">hello</div> 27 <div class="div2">hello world</div> 28 </section> 29 </body> 30 </html>
當我們的使用relative定位的元素的父元素是body時候，我們對body使用overflow:hidden并不會隱藏定位元素，原因是body會默認將overflow屬性傳給html。我們可以給html也設置overflow屬性，那么body的overflow屬性就不會傳給html.類似的屬性還有background屬性。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{border: 1px solid darkred;background: #ccc;}.div1{position: relative;top:50px;}.div2{text-indent: 2em;}body{border: 1px solid black;overflow: hidden;}</style> </head> <body><div class="div1">hello</div><div class="div2">hello world</div></body> </html>?
給html使用overflow屬性后：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{border: 1px solid darkred;background: #ccc;}.div1{position: relative;top:50px;}.div2{text-indent: 2em;}body{border: 1px solid black;overflow: hidden;}html{overflow: hidden;}</style> </head> <body><div class="div1">hello</div><div class="div2">hello world</div></body> </html>
4、fixed
元素相對于瀏覽器窗口(viewport)定位的，如果沒有設置top等屬性，元素會在原來的位置。元素會脫離文檔流（元素所在的空間可以被其他的元素占據），定位后的元素表現的像一個inline-block。根據元素的內容占據寬度不會像塊級元素一樣占滿一行。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1{ 8 background: red; 9 font-size: 2em; 10 } 11 .div2{ 12 background: green; 13 font-size: 2em; 14 text-indent: 2em; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="div1"> div1</div> 20 <div class="div2"> div2</div> 21 </body> 22 </html>?
? DIV1使用fixed定位后
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .div1{ 8 background: red; 9 font-size: 2em; 10 position: fixed; 11 } 12 .div2{ 13 background: green; 14 font-size: 2em; 15 text-indent: 2em; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="div1"> div1</div> 21 <div class="div2"> div2</div> 22 </body> 23 </html>
5、z-index屬性
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。屬性值為數值，默認為0;如果使用定位的元素沒有設置z-index,但是元素的位置發生了重疊，
后使用定位的元素在上面。如果使用定位的元素的子元素也使用了定位和z-index,子元素是否位于其他元素之上取決于父元素的z-index的值，這是因為子元素是在父元素的層疊上下文的范圍內的，fixed定位的元素會立即獲得層疊上下文，但是relative和absolute會在使用z-index屬性后建立層疊上下文。不論父元素的z-index是否大于子元素的，父元素都不能覆蓋子元素。
注釋：元素可擁有負的 z-index 屬性值。
注釋：z-index 僅能在定位元素上奏效（例如 position:absolute;）！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 img{ 8 position: absolute; 9 top: 20px; 10 left: 20px; 11 } 12 p{ 13 position: relative; 14 z-index: 1; 15 } 16 </style> 17 </head> 18 <body> 19 <p>元素定位</p> 20 <img src="1.png" alt=""> 21 <p>元素定位</p> 22 </body> 23 </html>
轉載于:https://www.cnblogs.com/yiluhuakai/p/8462617.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： POJ 1679 - The Uniqu
- 下一篇： [转]windows中断与共享的连接（s