按鈕不調用按鈕的css類，但它繼承父div的css類

Question

按鈕不調用按鈕的CSS類，但它繼承了父類div的CSS類 任何人都可以幫忙嗎？

.sq-ui-ban { 
 
    background-color: #abacb1; 
 
    color: black; 
 
    width: 1000px; 
 
    height: auto; 
 
    overflow: hidden; 
 
    font-style: normal; 
 
    font-family: Calibri; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    position: relative; 
 
} 
 

 
.moreBan { 
 
    position: fixed; 
 
    cursor: pointer; 
 
    font-family: Calibri; 
 
    background: #1c94c4; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    border: none; 
 
    font-size: large; 
 
    padding: 5px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
    right: 0px; 
 
}

<div class="sq-ui-ban"> 
 
<button class="moreBan"><i class="fa fa-arrow-circle-o-down"></i><span class="moretext">More</span></button> 
 
</div>

在這個有什麼問題呢？

Answer 1

從.sq-ui-ban中刪除overflow:hidden並給出正確的高度，寬度，左側和頂部（或任何位置）值以使按鈕可見。

因爲按鈕的父div高度是自動的，並且按鈕是position:absolute所以，父div不採用高度，overflow:hidden將不允許按鈕顯示。

.sq-ui-ban { 
 
    background-color: #abacb1; 
 
    color: black; 
 
    width: 1000px; 
 
    height: auto; 
 
    font-style: normal; 
 
    font-family: Calibri; 
 
    font-size: 20px; 
 
    font-weight: normal; 
 
    position: relative; 
 
    
 
} 
 

 
.moreBan { 
 
    position: fixed; 
 
    cursor: pointer; 
 
    font-family: Calibri; 
 
    background: #1c94c4; 
 
    text-align: center; 
 
    color: #FFFFFF; 
 
    border: none; 
 
    font-size: large; 
 
    padding: 5px; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 50px; 
 
    width: 100px; 
 
    
 
}

<div class="sq-ui-ban" id="banner"> 
 
<button class="moreBan"><i class="fa fa-arrow-circle-o-down"></i><span class="moretext">More</span></button> 
 
</div>