a、不影响元素本身的特性;
b、不使元素脱离文档流;
c、如果没有定位偏移量,对元素本身没有任何影响;
二. 定位元素位置控制
top / right / bottom / left 定位元素偏移量
三. 绝对定位 position:absolute;
a、使元素完全脱离文档流;
b、使内嵌标签支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于整个文档(document)发生偏移;
e、相对定位一般都是配合绝对定位元素使用;
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>范例</title> <style> div{font-size:20px;} body{border:1px solid black;} .box1{width:300px;height:300px; background:red; position:relative;} .box2{width:200px;height:200px;background:blue;} .box3{width:100px;height:100px;background:green; position:absolute;right:0;bottom:0;} </style> </head> <body> <div class="box1"><!-- 定位父级(干爹) --> <div class="box2"><!-- 结构父级(亲爹) --> <div class="box3"></div><!-- 绝对定位元素(儿子) --> </div> </div> </body> </html>
四. 定位元素层级
默认后者层级高于前者
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>范例</title> <style> div{font-size:20px;} .box1{width:100px;height:100px; background:red; position:absolute; z-index:1;} .box2{width:200px;height:200px;background:blue; position:relative;} .box3{width:100px;height:100px;background:green;} </style> </head> <body> <div class="box1">div1</div> <div class="box2">div2</div> <div class="box3">div3</div> </body> </html>