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 ::之前的元素似乎不匹配它的父母

回答

相关问题