有谁可以向我解释为什么我的立场:绝对div不服从我的立场:相对div？
我确信这很简单,但我不能为我的生活看到它是什么.
我想看到位置:绝对div(class-2)位于position位置:relative div(class-1).
这是以下代码的两个类,完整链接:
div.class-1 {
position:relative;
background-color:#CCC;
width: 500px;
height: 200px;
}
div.class-2 {
position:absolute;
background-color:#C96;
width: 250px;
height: 100px;
top:0px;
right:0px;
}
HTML
<div class="wrapper">
<div class="before">class-before</div>
<div class="class-1">class-1</div>
<div class="class-2">class-2</div>
<div class="after">class-after</div>
</div>
http://jsfiddle.net/craig_wadman/HMwtN/
希望一切都有意义吗？
绝对定位元素必须嵌套在相对定位元素内,以获得所需结果:
<div class="class-1">
<div class="class-2">class-2</div>
</div>
绝对定位101:绝对定位元素相对于最接近的(相对的,绝对的或固定的)父母定位; 如果没有则<body>使用(原始标记就是这种情况).