更改一个元素的CSS会影响div之外的其他元素

每当我尝试向上或向下移动分隔符时，上面的.separator类中的元素h1都会随分隔符一起移动。有没有简单的方法来摆脱这个问题？更改一个元素的CSS会影响div之外的其他元素

下面是我的HTML/CSS代码

.banner img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.banner { 
 
    position: relative; 
 
    margin: -0.6% 
 
} 
 
.OverLay { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    top: 0; 
 
} 
 
.OverLayContent { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.overLayDescription { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 
.OverLayText { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.OverLayText h1 { 
 
    margin-bottom: 5%; 
 
    color: #FFF; 
 
    font-size: 120px; 
 
    /*border-bottom: 2px solid #15a4fa;*/ 
 
} 
 
.separator { 
 
    margin: 0 auto; 
 
    width: 50%; 
 
    background-color: #15a4fa; 
 
    height: 2px; 
 
    margin-bottom: 10.4%; 
 
} 
 
.OverLayText a { 
 
    color: #FFF; 
 
    border: 1px solid #15a4fa; 
 
    padding: 10px; 
 
} 
 
.OverLayText p { 
 
    color: #FFF; 
 
    margin-top: 2%; 
 
    margin-bottom: 3%; 
 
} 
 
.OverLayContent { 
 
    position: relative; 
 
}

<div class="banner"> 
 
    <img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" /> 
 
    <div class="OverLay"> 
 
    <div class="OverLayContent"> 
 
     <div class="OverLayText"> 
 
     <h1>STRICT</h1> 
 
     <dir class="separator"></dir> 
 
     <p>STRICT is a responsive theme with a a clean and minimal look.</p> 
 
     <a href="#">Call to action</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-09-22 Abdul Basit

更简单将使用*'pseudo' *元素[**的jsfiddle **]（https://jsfiddle.net/vivekkupadhyay/eLuLo6be） – vivekkupadhyay

'.OverLayText'在移动'.separator'时正在增长/缩小。这就是为什么STRICT也在移动。 –

谢谢@SohaibMohammed和Kilian Stinson的帮助。您的意见帮助我了解我的错误。 –

\t .banner img { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t position: relative; 
 

 
\t } 
 
\t .banner { 
 
\t position: relative; 
 
\t margin: -0.6% 
 
\t } 
 
\t .OverLay { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t top: 0; 
 
\t } 
 
\t .OverLayContent { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display: table; 
 
\t } 
 
\t .overLayDescription { 
 
\t width: 70%; 
 
\t margin: 0 auto; 
 
\t } 
 
\t .OverLayText { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
\t text-align: center; 
 
\t vertically-align:middle; 
 
\t } 
 
\t .OverLayText h1 { 
 
\t margin-bottom: 5%; 
 
\t color: #FFF; 
 
\t font-size: 120px; 
 
\t /*border-bottom: 2px solid #15a4fa;*/ 
 
\t } 
 
\t .separator { 
 
\t /*margin: 0 auto;*/ 
 
\t width: 50%; 
 
\t background-color: #15a4fa; 
 
\t height: 2px; 
 
\t /*top: 80%;*/ 
 
\t position: relative; 
 
\t margin: auto; 
 
\t text-align: center; 
 
\t display: block; 
 
\t } 
 
\t .OverLayText a { 
 
\t color: #FFF; 
 
\t border: 1px solid #15a4fa; 
 
\t padding: 10px; 
 
\t } 
 
\t .OverLayText p { 
 
\t color: #FFF; 
 
\t margin-top: 2%; 
 
\t margin-bottom: 3%; 
 
\t } 
 
\t .OverLayContent { 
 
\t position: relative; 
 
\t }

<div class="banner"> 
 
    <img src="http://cometoart.com/wp-content/uploads/2016/03/pojo-placeholder-2.png" /> 
 
    <div class="OverLay"> 
 
    <div class="OverLayContent"> 
 
     <div class="OverLayText"> 
 
     <h1>STRICT</h1> 
 
     <dir class="separator"></dir> 
 
     <p>STRICT is a responsive theme with a a clean and minimal look.</p> 
 
     <a href="#">Call to action</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-09-22 06:00:57

仅仅因为你正在使用.OverLayText到vertically-align:middle;。

来源

2016-09-22 05:56:40

更改一个元素的CSS会影响div之外的其他元素

回答

相关问题