css width％工作不正确;超过必要的

Question

我有一组我想要叠在一起的图像。我正在使用bootstrap，我在一个jumbotron的中心保留了一个父div。这个div包含一个图像，绝对div还包含图像。但是，当我将width:100%应用于子div时，它们最终会更长/

这个js-fiddle是代码片段：https://jsfiddle.net/yhL6tndn/

我被认为％实际上是针对父容器（示例中为#major）进行测量的。因此#semimajor的宽度和高度应相等，因为#major的宽度和高度相等。

在检查实际尺寸时，我发现

1. #major的父级的整个宽度用于计算#semimajor的宽度

或

1. 正在使用边距计算#major的宽度。我的box-sizing属性设置为border-box。

应该发生的是#semimajor应该测量150px到150px。我不能在代码中发现错误。

编辑1：position: relative #major删除了问题，但我仍然不明白为什么会这样。

Answer 1

当您使用position: absolute时，它来自文档的正常流程，并且相对于body定位，并且来自#major。

注意当您添加position: relative时，它绝对定位到最近的相对定位的父容器，即#major，因此孩子不会超过#major。