Question

我正在改变子元素从相对到绝对的位置。

子元素的宽度是父级宽度的百分比。当我将位置从相对位置更改为绝对位置时，百分比现在包括父级的填充。在演示中悬停黑色div。

如何避免将子填充包含在子项的百分比中？
为什么它在两个位置值中的行为都不同？

body {
  margin: 0;
}

#parent {
  width: calc(100% - 100px);
  height: 100vh;
  padding-right: 100px;
  background: pink;
  position: relative;
}

.children {
  position: relative;
  width: 50%;
  height: 100%;
  background: black;
  float: left;
}
.children:nth-child(2) {
  background: grey;
}

#parent:hover .children {
  position: absolute;
  top: 0;
  left: 0;
}
#parent:hover .children:nth-child(2) {
  left: 50%;
}

<div id="parent">

  <div class="children"></div>
  <div class="children"></div>

</div>

Answer 1

当元素设置为position:absolute时，其包含的框是父级的填充框（填充周围的框）。您的示例中的结果是正确的。

<强> jsFiddle

你可以这样做以获得你想要的结果，并且在你的例子中，父母的width:calc(100% - 100px)似乎没有必要。

#children:hover {
  position: absolute;
  top: 0;
  left: 0;
  right: 100px; /* the same value as parent's right padding */
  width: auto; /* reset to default, depending on 'left' and 'right' values */
}

修改

OP实际上有两个绝对div，使用calc()可以帮助。

<强> jsFiddle

#parent:hover .children { position: absolute; top: 0; left: 0; width: calc(50% - 50px); } #parent:hover .children:nth-child(2) { left: calc(50% - 50px); }

但是，最简单的方法会向父级添加一个额外的容器，并在其上设置填充和背景，其余的样式不变。

<强> jsFiddle

<div id="container"> <div id="parent"> <div class="children"></div> <div class="children"></div> </div> </div>

#container { padding-right: 100px; background: pink; } #parent { height: 100vh; position: relative; }

Answer 2

这是因为一个绝对定位的元素从它的父流中取出。

因此它不再识别父级的填充。

它简单地将自身与任何祖先具有位置相对或位置绝对的边界联系起来。边界的0,0点是边界内的点，并且在任何右边界之前水平延伸到右边界。

因此，您必须为您在其父级上执行的绝对定位元素定义类似的填充。

Answer 3

一种可能的解决方案：在悬停时向#children添加一个width属性。

#children:hover {
    width: calc(100% - 100px) /* <-- Add this */
    position: absolute;
    top: 0;
    left: 0;
}

相对位置和绝对位置之间的填充

3 个答案: