Question

我的目标是能够动态定位DIV，使其在视觉上精确地位于其父级下方 - 即，使其宽度与其父级相同，并从父级左边框的底部开始0像素。 / p>

基本上，最终结果应该是这样的：

这里我只使用相对定位的父DIV和绝对定位的子DIV。然后，我只需使用left和top定位属性将子DIV移动到位。

然而，你会注意到，为了实现这一点，我必须在孩子DIV上设置left: -10px。原因是，如果我不这样做，就会发生这种情况：

此处，子DIV 不直接位于父级下方。原因似乎是left和right位置值考虑了父级的 border ，因此left: 0px意味着直接位于右侧父边界结束的地方。

所以我必须以负left值来弥补这一点。这很好，除非我想能够使用Javascript动态地执行此操作，我可能事先不知道父边框的厚度 - （或者即使父级甚至具有边框）。所以我不能简单地在样式表中硬编码负像素值。我必须使用Javascript动态查询父元素的计算样式并确定父元素的边框宽度，这有点麻烦。

问题：有没有办法在没有的情况下使用Javascript来发现边框宽度？

我认为这可能与W3C box model有关，因为left考虑了父母的边界。所以，我尝试使用box-sizing: border-box属性，以便浏览器在框大小中包含边框宽度 - 但这没有任何效果。 left值0px仍然意味着直接位于父元素边框的右侧。

Answer 1

.bar在.foo内是不是必须要这样做？你可以让它们成为兄弟姐妹并将它们包装在一个设置为relative的容器中。你甚至不需要在他们每个人身上设置width，只是在他们的父母身上：

<强> HTML

<div class="container">
   <div class = "foo"></div>
   <div class = "bar"></div>
</div>

<强> CSS

.container{
  width: 200px;
  position: relative;
}

.foo {
  border: 10px solid #000000;
  height: 45px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
}

.bar {
  box-sizing: border-box;
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  border: 1px solid #000000;
  height: 500px;
}

FIDDLE

Answer 2

您应该将它们添加到像此示例

这样的容器中

<div>
    <div class = "foo"></div>

    <div class = "bar"></div>
</div>

http://jsfiddle.net/cvz3gvbs/6/

您可以删除班级栏的位置

左/右定位考虑了边框大小

2 个答案: