创建布局
一、定位內(nèi)容
1、position和top
position 屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，使用absolute和fixed定位的元素會(huì)表現(xiàn)的像inline-block元素，使用fixed定位的元素表現(xiàn)的原本一樣。absolute和fixed定位會(huì)是元素脫離文檔流。
top、bottom、left、right用來(lái)為定位元素設(shè)置偏移量。
top 屬性規(guī)定元素的頂部邊緣。該屬性定義了一個(gè)定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
注釋：如果 "position" 屬性的值為 "static"，那么設(shè)置 "top" 屬性不會(huì)產(chǎn)生任何效果。
對(duì)于 static 元素，為 auto；對(duì)于長(zhǎng)度值，則為相應(yīng)的絕對(duì)長(zhǎng)度；對(duì)于百分比數(shù)值，為指定值；否則為 auto。
對(duì)于相對(duì)定義元素，如果 top 和 bottom 都是 auto，其計(jì)算值則都是 0；如果其中之一為 auto，則取另一個(gè)值的相反數(shù)。
其他三個(gè)和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值會(huì)根據(jù)position值不是static的最近祖先元素來(lái)定位，上例不存在這樣的元素，所以會(huì)相對(duì)于body元素來(lái)定位。后面的元素會(huì)向上浮動(dòng)。
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值會(huì)相對(duì)于position值為static的自身元素來(lái)定位。后面元素不會(huì)浮動(dòng)。
當(dāng)relative定位元素超出父元素的范圍，我們可以使用overflow: hidden來(lái)隱藏。
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>
對(duì)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>
當(dāng)我們的使用relative定位的元素的父元素是body時(shí)候，我們對(duì)body使用overflow:hidden并不會(huì)隱藏定位元素，原因是body會(huì)默認(rèn)將overflow屬性傳給html。我們可以給html也設(shè)置overflow屬性，那么body的overflow屬性就不會(huì)傳給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
元素相對(duì)于瀏覽器窗口(viewport)定位的，如果沒(méi)有設(shè)置top等屬性，元素會(huì)在原來(lái)的位置。元素會(huì)脫離文檔流（元素所在的空間可以被其他的元素占據(jù)），定位后的元素表現(xiàn)的像一個(gè)inline-block。根據(jù)元素的內(nèi)容占據(jù)寬度不會(huì)像塊級(jí)元素一樣占滿一行。
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 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。屬性值為數(shù)值，默認(rèn)為0;如果使用定位的元素沒(méi)有設(shè)置z-index,但是元素的位置發(fā)生了重疊，
后使用定位的元素在上面。如果使用定位的元素的子元素也使用了定位和z-index,子元素是否位于其他元素之上取決于父元素的z-index的值，這是因?yàn)樽釉厥窃诟冈氐膶盈B上下文的范圍內(nèi)的，fixed定位的元素會(huì)立即獲得層疊上下文，但是relative和absolute會(huì)在使用z-index屬性后建立層疊上下文。不論父元素的z-index是否大于子元素的，父元素都不能覆蓋子元素。
注釋：元素可擁有負(fù)的 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>
轉(zhuǎn)載于:https://www.cnblogs.com/yiluhuakai/p/8462617.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
- 上一篇： POJ 1679 - The Uniqu
- 下一篇： [转]windows中断与共享的连接（s