1、定位的疊放次序（只有定位的盒子才擁有這個屬性）
（1）在使用定位布局的時候，可能會出現盒子重疊的情況，此時，可以使用z-index來控制盒子的前后次序，該屬性的值可以是正整數、負整數或0，默認是auto，數值越大，盒子越靠上
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; z-index: 5; } .test2 { position: absolute; width: 200px; height: 200px; background-color: red; z-index: 3; } .test3 { position: absolute; width: 200px; height: 200px; background-color: black; z-index: -1; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </body> </html>
（2）如果盒子的z-index屬性的值相等，那么后來者居上
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; } .test2 { position: absolute; width: 200px; height: 200px; background-color: red; } .test3 { position: absolute; width: 200px; height: 200px; background-color: black; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </body> </html>
2、絕對定位的盒子水平居中
加了絕對定位的盒子不能通過margin :0 auto水平居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; left: 50%; margin-left: -100px; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="test1"></div> </body> </html>
先將盒子的左側調整到瀏覽器的中間位置，然后再向左側移動盒子寬度的一半
3、定位的特性
（1）絕對定位和浮動類似，行內元素添加絕對定位或固定定位后就可以直接設定高度或寬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="test1"></div> </body> </html>
（2）塊級元素添加絕對定位或固定定位，如果不設定高度或寬度，默認大小是內容的大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; background-color: yellow; } </style> </head> <body> <div class="test1">你好</div> </body> </html>
（3）浮動的元素只會壓住標準流的盒子，但是不會壓住標準流里盒子的文字或圖片，但是絕對定位或固定定位會壓住標準流的所有內容
浮動：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { float: left; background-color: yellow; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <p>早上好，今天是星期一</p> </body> </html>
定位：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; background-color: yellow; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <p>早上好，今天是星期一..................</p> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/18298.html
標籤：Html/Css