不能将元素放在彼此之上 - CSS Bootstrap ReactJS答案

【问题标题】：Can't position elements on top of each other - CSS Bootstrap ReactJS不能将元素放在彼此之上 - CSS Bootstrap ReactJS
【发布时间】：2022-01-21 14:40:17
【问题描述】：

文本应该是带有文本中心的白色徽章。顺便说一句，我用的是 gatsby StaticImages....

代码..

<div class="row mx-4"  style={{ position:'relative' }}>

                        <StaticImage style={{ position:'absolute',  filter: 'brightness(100%)' }} src="../images/scrollg.png"  alt="tatil" placeholder="tracedSVG" />
                        
                        <div className="d-flex justify-content-end pt-4 pe-4"  >
                             <StaticImage  src="../images/badge.svg"  alt="tatil" placeholder="tracedSVG" />
                         
                             <div style={{ position:'absolute'}}>   <p  className="text-center">200€’dan başlayan fiyatlarla</p></div>
                    
                       </div>
                       
                        <div className="row mx-5 scrollg" style={{ position:'absolute' , height:'400px'}}>
                                <div className="col-12 my-auto">
                                <h4 className="fw-bold text-white">Roma’yı Keşfetme Mevsimi</h4><br />
                                <p className="col-lg-5 col-md-5 col-sm-12 scrollg">Haydi, siz de Tatilbudur’un uygun fiyatlı yurt dışı turlarını incelemeye başlayın, yurt dışında daha fazla yeni yerler keşfetmenin keyfine varın!</p>
                                <button class=" px-3 py-1 scrollg-button rounded-pill  "> Fırsatları Gör</button>
                            </div>
                        </div>
                      </div>

【问题讨论】：

请发布一个最小的可编辑示例

标签： html css reactjs bootstrap-4

【解决方案1】：

这里的文本需要绝对定位并且相对到文本和图像所在的父div元素。因此，您必须将 position-relative 类添加到父级。

要使文本垂直居中，您可以在top 和bottom 上添加相等的距离。

为确保文本在白色徽章内，您可以在文本 div 中添加一些固定的width。

<div className="d-flex justify-content-end pt-4 pe-4 position-relative">
     <StaticImage  src="../images/badge.svg"  alt="tatil" placeholder="tracedSVG" />
     // I've added 100px width as an example.                    
     <div style={{ position:'absolute', top: '25%', bottom: '25%', width: '100px'}}>   
         <p  className="text-center">200€’dan başlayan fiyatlarla</p>
    </div>                
 </div>

【讨论】：