Question

快速示例，

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部分开始。

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

如果您不想改变您的结构，请执行以下操作：）

以下是实现目标的步骤：

获取seconddiv的顶部和左侧位置值
从firstdiv顶部和左侧值中减去seconddiv的顶部和左侧值
设置seconddiv的顶部和左侧位置值

示例：

考虑secondTop = 50px; （seconddiv的最高值），secondLeft = 50px; （seconddiv的左值）
来自你的代码片段firstTop = 100px和firstLeft = 100px 所以让x = 50-100; （secondLeft-firstLeft）y = 50-100; （secondTop-firstTop）
将'x'值设为'left'值，将'y'值设为'topdiv'的'top'值

JSBIN示例： http://jsbin.com/hofalicohisu/1/edit

Answer 4

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

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

html绝对位置绝对

4 个答案: