将flexbox的子元素定位为相对位置和top属性（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%;样式时position: relative; right: -100%; position: relative; right: -100%; 到h2元素，文本向右移动100％。 但是，如果我将样式更改为position: relative; top: -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>