标签:position
在博客《HTML CSS——position学习终结者(一)》中我们认识到如果某一absolute作用的元素的父对象(或曾祖父,只要是父级对象)设置了position属性且position的属性值为absolute、relative或者fixed,那么这个子元素会参照离它(指子元素)最近的且position的属性值为absolute、relative或者fixed的父元素进行定位,子元素的定位点为父元素的左上角,学习过padding的人可能会这样想:这个时候如果父元素设置了padding样式,那absolute作用的子元素应该从padding处开始定位吧?呵呵呵,这种认识对吗,先参见下面的例子:
代码01:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ position:absolute; margin-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
说明:上面的son1父元素没有使用padding样式,这时son1定位点为父元素的左上角;
代码02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ position:absolute; margin-left:50px; padding-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
说明:上面的son1父元素添加了样式padding-left并设置其值为50px;
总结:对比图01和图02我们会发现这种情况下son1并没有受padding-left的影响,据此我们可以认定父元素纵使设置了padding样式,absolute作用的子元素也是从父元素的左上角开始定位。
【0分下载演示资源】
【参见另一篇博客——HTML CSS——position学习终结者(一)】
HTML CSS——position学习终结者(二),布布扣,bubuko.com
标签:position
原文地址:http://blog.csdn.net/gaohuanjie/article/details/30982863