Question

我有一个宽度和高度未知的div :(这个div是更大div的孩子之一）

    #myDiv { 
       height: 100%;
       width: 20%;
       float: right;
    }

    #overlay {
       position: absolute;
       width: 100%;
       height: 100%;
    }

<div id="myDiv"><div id="overlay"></div></div>

但问题是叠加div根本不适合，而且它的宽度和高度都是100％，它比它的父（#myDiv）大。

我做错了什么？

Answer 1

绝对定位的子元素可以从相对定位的父元素突出的一个原因是父元素是否有填充。

举个例子：

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff000099;
}

<div class="parent">
  <div class="child"></div>
</div>

如您所见，子项的实际宽度和高度与父项相同，但是由于父项具有 padding-top 和 padding-left，因此子项的内容放置在父项的 padding 之后。这会使孩子在底部和右侧突出。

根据所需的结果，有不同的处理方法。

如果您希望子项完美地覆盖父项，请使用 bets's solution 并设置 top、right、bottom 和 {子项上的 {1}} 属性而不是 left 和 width，或只需将 height 和 width 保持在 100% 并设置height 和 top 为 0，如下所示：

left

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #ff000044;
}

如果你想让子级占据父级的padding内的所有空间，你可以使用<div class="parent"> I am parent content <div class="child">I am child content</div> </div>从子div中移除父级的padding：

calc()

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  background-color: #ff000099;
}

（请记住从孩子的宽度中删除左右填充以及从其高度中删除顶部和底部。这就是我将填充乘以 2 的原因。）

结合这些，如果你想让孩子在top和left padding之后开始，而不是从right或bottom伸出来，只需要从height和width中减去top和left padding孩子：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  padding: 50px;
  width: 250px;
  height: 50px;
  margin: auto;
  background-color: blue;
}
.child {
  position: absolute;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background-color: #ff000099;
}

Answer 2

通过使任何元素position: absolute;表示：将我置于position: relative;的第一个父元素，它不总是等于其父元素。

如果还有其他孩子，你需要记住，其中一个孩子绝对是在“下面”放置的元素。

Answer 3

接受的答案对我来说并没有解决。父元素已经是new TouchAction(DriverConfig.getInstance().getDriver()).press(point(250, 735)).waitAction(waitOptions(Duration.ofSeconds(3))).moveTo(point(250, -460)).release() .perform();。

这对我有用：

在子元素中，不要使用position: relative;来填充高度，而使用height:100%来填充宽度。

width：绝对定位元素的100％大于父元素

3 个答案: