CSS ::之前的元素似乎不匹配它的父母

所以我試圖在用戶將鼠標懸停在圖像上時顯示圖像上的漸變。我通過以下方式完成此操作，然後添加它。CSS ::之前的元素似乎不匹配它的父母

我的HTML佈局就像這樣：

<div class='portfolio_thumb'> 
    <div class='portfolio_thumb_caption'></div 
</div

和我的CSS這些項目

.portfolio_thumb { 
    width: 100%; 
    height: 300px; 
    background-size: cover; 
} 

    .portfolio_thumb .portfolio_thumb_caption:before { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); 
     content: ''; 
     opacity: 0; 
     transform: translate3d(0,50%,0); 
    } 

    .portfolio_thumb:hover .portfolio_thumb_caption:before { 
     transform: translate3d(0,0,0); 
     opacity: 1; 
    }

但我的問題是，當我將鼠標懸停在圖片，漸變顯示出來，但它涵蓋我的整個內容區域（不是頁腳或頁眉），不應該只是漸變的主要div「the portfolio_thumb div？從我看到的在線例子看起來是這樣，但如果它不是他們如何實現這一目標？

謝謝！所以，如果你想絕對定位是相對於它的父（或祖父母之一）

.portfolio_thumb { 
    position: relative; 
}

僞元素仍是其父母的孩子，（和：

來源

2014-10-29 Max McKinney

添加到您的CSS在僞元素的定義中使用（grand）父元素的寬度和高度以百分比表示），您需要明確定義其（grand）父級上的定位。會發生什麼情況是，這會與具有明確定位定義的直接（宏）父代建立上下文。

來源

2014-10-29 19:37:53 Arbel

我想你的意思是.portfolio_thumb，並補充說，工作。我在閱讀您的回覆後發現的這篇文章也清晰了一些並解釋了爲什麼我的問題正在發生。 http://css-tricks.com/absolute-positioning-inside-relative-positioning/ – 2014-10-29 20:14:36

@DoubleElite很高興爲您提供幫助。我會更新答案以反映最終解決方案。 – Arbel 2014-10-29 21:14:26

CSS ::之前的元素似乎不匹配它的父母

回答

相關問題