父元素position设置relative或absolute会影响position为absolute的子元素的显示效果?

<html>
<head>
<style type="text/css">
.pos0
{
position:relative;/*relative的话,字显示为横排,改成absolute,字显示为竖排*/
left:100px;
top:100px;
}
.pos1
{
position:absolute;
left:100px;
top:100px
}
</style>
</head>
<body>
<div class="pos0"><div class="pos1">绝对定位</div></div>
</body>
</html>

我先给你解释一下两个的区别吧。

    相对定位是相对于自己本身位置进行偏移不脱离文档流(与正常文档之间存在关系)。

    绝对定位从正常文档流脱出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位。

    解释可能有点模糊,如果想使用绝对定位一个元素,你可以使父盒子(有固定宽高)使用相对定位,那么子元素的移动范围会在父盒子的范围内移动。

    我的解释只是为了使你更了解相对定位与绝对定位,是否能解决你的问题,你看着办吧

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-10-29
没有宽度,当pos0为相对定位时,pos0默认宽度继承了DIV的属性,占一行,当pos0为绝对定位时,就没有了宽度,要么给pos0设置宽度,要么给pos1设置宽度强制撑开外层pos0本回答被提问者采纳
第2个回答  2015-10-29
你可以 width 100% 试试
相似回答