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

Question

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

例如，位置div的绝对值是100，100，而位置是“ position”'sx-100，“ position”'sy-100，...表示绝对值是0、0。 B位置是“ position”'sx + 100，“ position”'sy + 100，...表示绝对值是200、200。

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

如何仅使用CSS使“ A”和“ B”位置跟随“位置” div？ 谢谢。

代码是这样的，因为“ A”和“ B”不在“ position” 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标签是在相对位置...... 看到这

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

祝好运

顺便说一句：尝试为您的div使用更好的名称= 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 个解决方案

解决方案1
0 2010-12-05 17:10:52

解决方案2
0 2010-12-05 17:23:19

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

问题描述

2 个解决方案

解决方案1 0 2010-12-05 17:10:52

解决方案2 0 2010-12-05 17:23:19

解决方案1
0 2010-12-05 17:10:52

解决方案2
0 2010-12-05 17:23:19