定位具有位置相对和顶部属性的弹性箱的子元素（右侧属性有效，但顶部不起作用）

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>