使用 position relative 和 top 属性定位 flexbox 的子元素（right 属性有效，但 top 无效）

Question

<div class="b-wrapper d-flex d-flex-center">
     <div class="inner-wrapper">
         <h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
         <p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
 </div>

当尝试将position: relative; right: -100%; 的样式添加到 h2 元素时，文本会向右移动 100%。但是，如果我将样式更改为position: relative; top: -100%;，则文本拒绝向上移动 100%。我假设这与 flexbox 和定位有关。我应该怎么做才能解决这个问题？

.d-flex-center {
    justify-content: center;
    align-items: center;
}
.d-flex {
    display: flex!important;
}
.b-wrapper .inner-wrapper {
    margin: 0 15px -17px 15px;
}

Answer 1

顶部定位在这里不起作用，因为您使用的是百分比值，而容器没有高度。正值也一样。

要查看您的顶部/底部定位是否生效

• 给包含的元素一个高度，这样百分比值就会根据这个计算出来

或

• 使用像素值进行顶部/底部定位

使用% 值

父容器必须具有指定的高度，以便正确计算百分比。

.d-flex-center {
    justify-content: center;
    align-items: center;
}
.d-flex {
    display: flex!important;
}
.b-wrapper .inner-wrapper {
    margin: 0 15px -17px 15px;
}
.inner-wrapper {
  height: 150px;    /* container height */
}
h2 {
  position: relative;
  right: -40%;
  top: -20%;      /* -20% is now equivalent to -30px (20% of 150px height) */
}

<div class="b-wrapper d-flex d-flex-center">
     <div class="inner-wrapper">
         <h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
         <p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
 </div>

使用px 值

像素值将始终保持一致，因为它不是基于另一个值计算的。 （无需在父容器上指定高度。）

.d-flex-center {
    justify-content: center;
    align-items: center;
}
.d-flex {
    display: flex!important;
}
.b-wrapper .inner-wrapper {
    margin: 0 15px -17px 15px;
}
h2 {
  position: relative;
  right: -40%;
  top: -30px;    /* -30px === -30px */
}

<div class="b-wrapper d-flex d-flex-center">
     <div class="inner-wrapper">
         <h2 class="b-animate h b-from-top b-delay03">Project 3</h2>
         <p class="b-animate p b-from-right b-delay03">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>
 </div>