CSS - div覆蓋響應問題

基本上我有6個包含圖像和標題疊加的框。在Click事件中，標題疊加層被隱藏，並顯示一個覆蓋整個圖像的文本疊加層。

問題：

在點擊疊加向下推動其他框，我找不到在哪裏，這是來自哪裏。

當方框/圖像尺寸是其他任何尺寸但默認情況下，疊加圖像會更大。因此，在較小的屏幕尺寸上，覆蓋層與圖像重疊。

.vc_row-fluid { 
text-align:center; 
} 

.hr-banner { 
    padding: 0; 
    cursor: pointer; 
    text-align:left; 
    display:inline-block; 
    max-width: 470px; 
    max-height: 259px;  
    width: 100%; 
    height: 100%;  
} 

.hr-banner > img { 
    width: 100%; 
} 

.hr-banner-title { 
    margin: 0; 
    color: #FFF; 
    line-height: 2em; 
    margin-top: -3em; 
    margin-left: 16px; 
    font-size:24px; 
    font-weight:bold; 

} 
.hr-banner-text { 
    display: none; 
    position: absolute; 
    top: 0; 
    color: #FFF; 
    font-size: 1.2em; 
    background-color: rgba(0,0,0,0.6); 
    max-width: 470px; 
    max-height: 259px;  
    width: 100%; 
    height: 100%; 
    padding:0; 
    margin:0; 
} 

.hr-banner-text p {margin:16px;} 

.hr-noselect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 



<div class="hr-banner noselect"> 

<img draggable="false" src="/wp-content/uploads/2016/01/nvq.jpg" alt="" /> 
<h5 class="hr-banner-title">NVQs</h5> 
<div class="hr-banner-text"> 

It is important that we allow our staff to take ownership of their own development. We currently have almost 100 employees studying for an NVQ across a variety of different specialisms – from business administration to management. 

</div> 
</div>

我意識到這可能會工作，如果圖像是包含div的背景圖像更好，但是，我沒有寫此代碼，並無法改變結構，只有CSS。

千恩萬謝

來源

2016-02-03 LeeTee

你可以放在一起演示上的jsfiddle？ – Jeroen

可以請你添加一個鏈接到你的代碼演示？ –

現在正在做一個... – LeeTee

這是那種東西，你的意思是：

var hrBanner = document.getElementsByClassName('hr-banner')[0]; 
 

 
function showHideText() { 
 
this.getElementsByTagName('h5')[0].classList.toggle('nodisplay'); 
 
this.getElementsByClassName('hr-banner-text')[0].classList.toggle('nodisplay'); 
 
} 
 

 
hrBanner.addEventListener('click',showHideText,false);

.vc_row-fluid {text-align:center;} 
 

 
.hr-banner { 
 
\t position: relative; 
 
\t background-color: rgb(0,0,0); 
 
    cursor: pointer; 
 
    text-align:left; 
 
    display:inline-block; 
 
    max-width: 470px; 
 
    max-height: 259px;  
 
    width: 100%; 
 
    height: 259px;  
 
} 
 

 
.hr-banner > img { 
 
    width: 100%; 
 
} 
 

 
.hr-banner-title { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #FFF; 
 
    line-height: 24px; 
 
    font-size:24px; 
 
    font-weight:bold; 
 

 
} 
 
.hr-banner-text { 
 
\t position: absolute; 
 
\t top:0; 
 
\t left:0; 
 
    margin: 0; 
 
    padding: 0; 
 
    color: #FFF; 
 
    font-size: 1.2em; 
 
    background-color: rgba(0,0,0,0.6); 
 
    max-width: 470px; 
 
    max-height: 259px;  
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.hr-banner-text p {margin:16px;} 
 

 
.hr-noselect { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.nodisplay { 
 
    display: none; 
 
}

<div class="hr-banner noselect"> 
 

 
<img draggable="false" src="/wp-content/uploads/2016/01/nvq.jpg" alt="" /> 
 
<h5 class="hr-banner-title">NVQs</h5> 
 
<div class="hr-banner-text nodisplay"> 
 

 
It is important that we allow our staff to take ownership of their own development. We currently have almost 100 employees studying for an NVQ across a variety of different specialisms – from business administration to management. 
 

 
</div> 
 
</div>

來源

2016-02-03 11:31:46 Rounin

CSS - div覆蓋響應問題

回答

相關問題