Question

例如，我有一个“位置”div，我有一个名为“A”的div，一个名为“B”的div。我想两个“A”，“B”的位置都相对于“位置”div。

例如，位置div为100,100绝对值，A位置为“position”'sx - 100，“position”'sy - 100，...表示它在0,0 in in绝对值。 B位置是“位置”的x + 100，“位置”的y + 100，......这意味着它的绝对值是200,200。

但是当窗口调整大小或位置div移动时，我想让“A”和“B”跟随“位置”的位置。例如，如果“位置”为500,500.A位置应为400,400。而B位置应为600,600。

如何只使用css在“position”div后面的“A”和“B”位置？谢谢。

代码是这样的，因为“A”和“B”不在“位置”dom树中，在定位中使用相对/继承是不同的：

<body>
       <div id="A"></div>
       <div id="position"></div>
       <div id="B"></div>
</body>

Answer 1

这样做... div A和B应该在“position”div内。那么“position”div应该有position:relative而A，B应该是position:absolute。如果你的“位置”div必须是绝对的，那么考虑使用包装器div ..

当您设置绝对位置时，意味着顶部，底部，左侧和/或右侧属性将相对于具有position:relative的第一个父级..默认情况下，body标签位于相对位置... see this

现在....如果您不想将A和B插入“位置”..那么您将需要javascript来计算当前位置并更改它们。

祝你好运

BTW：尝试使用更好的名字为你的divs = P当你试图解释“位置”div的位置时会让人感到困惑

Answer 2

<html>
<head>
<style>
div {
    height: 200px;
    width: 200px;
}
#position {
    position: absolute;
    top: 400px;
    left: 400px;
    background-color: #444;
}
#A {
    position: relative;
    top: -100px;
    left: -100px;
    background-color: #e00;
}
#B {
    position: relative;
    top: -100px;
    left: 100px;
    background-color: #0ee;
}
</style>
<body>
    <div id="position"> position
           <div id="A">A</div>
           <div id="B">A</div>
    </div>
</body>
</html>

如何使div的位置相对于单个div？

2 个答案: