一、定位的叠放次序(只有定位的盒子才拥有这个属性)css
(1)在使用定位布局的时候,可能会出现盒子重叠的状况,此时,能够使用z-index来控制盒子的先后次序。该属性的值能够是正整数、负整数或0,默认是auto,数值越大,盒子越靠上html
<!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>
二、绝对定位的盒子水平居中布局
加了绝对定位的盒子不能经过margin :0 auto水平居中spa
<!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>
先将盒子的左侧调整到浏览器的中间位置,而后再向左侧移动盒子宽度的一半code
三、定位的特性htm
(1)绝对定位和浮动相似,行内元素添加绝对定位或固定定位后就能够直接设置高度或宽度blog
<!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)浮动的元素只会压住标准流的盒子,可是不会压住标准流里盒子的文字或图片,可是绝对定位或固定定位会压住标准流的全部内容utf-8
浮动:
<!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>