html绝对位置绝对

时间:2014-09-04 05:01:52

标签: html css

快速示例,

HTML,

<div class="firstdiv">
    firstdiv
    <div class="seconddiv">
        seconddiv
    </div>
</div>

的CSS,

.firstdiv{
    width: 200px;
    height: 200px;
    position:absolute;
    top:100px;
    left:100px;
    background-color:pink;
}
.seconddiv{
    position:absolute;
}

小提琴, http://jsfiddle.net/32pj4y16/

我希望seconddiv x,y轴不与firstdiv相关。

我想要seconddiv,从x:0px开始,y:0px;

但是在这里,它认识到(0,0)从firstdiv部分开始。

4 个答案:

答案 0 :(得分:1)

position: absolute的元素将使用其最接近定位的祖先来确定自己的位置。因此,在您的情况下,.seconddiv将始终使用.firstdiv作为定位的上下文。

您可以做的是将top:-100pxleft: -100px添加到.seconddiv,使其移至.firstdiv的左上角。

Here's how it'd work, based on your fiddle.

答案 1 :(得分:1)

如果你想让它们自由移动,请执行jsfiddle

<div class="container">
<div class="firstdiv">
    firstdiv

    </div>
    <div class="seconddiv">
        seconddiv
    </div>
</div>

答案 2 :(得分:1)

实际上可以使用脚本编写。

如果您不想改变您的结构,请执行以下操作:)


以下是实现目标的步骤:

  1. 获取seconddiv的顶部和左侧位置值
  2. 从firstdiv顶部和左侧值中减去seconddiv的顶部和左侧值
  3. 设置seconddiv的顶部和左侧位置值
  4. 示例:

    1. 考虑secondTop = 50px; (seconddiv的最高值),secondLeft = 50px; (seconddiv的左值)
    2. 来自你的代码片段firstTop = 100px和firstLeft = 100px  所以让x = 50-100; (secondLeft-firstLeft)y = 50-100; (secondTop-firstTop)
    3. 将'x'值设为'left'值,将'y'值设为'topdiv'的'top'值
    4. JSBIN示例: http://jsbin.com/hofalicohisu/1/edit

答案 3 :(得分:0)

您需要为seconddiv指定位置。试试这个:

.seconddiv{
   position:absolute;
   top:-100px;
   left:-100px;
}