Question

我正在为absolute使用relative和.box定位，但正如您所看到的那样，文字似乎不是top: 100%。

有人可以解释为什么会这样吗？

为什么在指定top: 100%时，文本（某些文字在这里）会溢出到子元素中？

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  height: 200px;
  margin: 0 auto;
  width: 90%;
  border: 1px solid red;
}
.child {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.childschild {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="box">
  <div class="child">
    <img src="dog1.jpg" alt="Picture of a dog" width="250" height="250">
    <div class="childschild">
      some text is going here
    </div>
  </div>
  <div class="child">dfd</div>
  <div class="child">dfd</div>
</div>

Answer 1

问题是因为在您的transform中，您将-50%应用于Y轴，这意味着会从50%中减去top:100%，所以它会有它您刚才说top:50%没有transform

如@Michael_B所述，您只将变换应用于X轴移除Y轴，或者您可以使用下面的代码垂直/水平居中框下方的文本：

position: absolute;
top: 100%;
right: 0;
left: 0;
margin: auto

注意：我将您的img更改为background-img（可选）

＆＃13;

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 200px;
  margin: 0 auto;
  width: 90%;
  border: 1px solid red;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid orange;
}
.box > div:first-of-type {
  background: url("//dummyimage.com/100x100");
  position: relative
}
.box > div:first-of-type div {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  margin: auto;
  width: 50px;
  text-align:center;
  background:red
}

＆＃13;

<div class="box">
  <div class="child">
    <div>some text is going here</div>
  </div>
  <div class="child">dfd</div>
  <div class="child">dfd</div>
</div>

＆＃13;

Answer 2

..当指定100％时，为什么文本（'某些文本在这里'文本）溢出到子元素？

因为您已将-Djava.util.logging.manager=org.apache.logging.log4j.jul.LogManager属性应用于元素：

transform

这告诉元素沿x轴向后移动50％的宽度，沿y轴向后移动50％的高度。

首先，你要说的是.childschild { transform: translate(-50%, -50%); }。然后你告诉它要回溯50％的高度，这会将它重新放回top: 100%元素。您可以删除.child，它将按预期工作。

请改为：transform（demo）

可以在此处找到有关插图的更完整说明：

Element will not stay centered, especially when re-sizing screen

Answer 3

如果我理解正确，这可以帮助你..

尝试使用margin-top: -10px;，它会将top的空间减少10px。您还可以尝试marign-left，margin-right和margin-bottom。

垂直居中，在flexbox中具有相对和绝对定位

3 个答案: