更改一個元素的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之外的其他元素

回答

相關問題