两个元素定位一个比另一个

.holderDiv{ 
 
\t position: relative; 
 
} 
 
.shadowSimulation{ 
 
\t position: absolute; 
 
\t background-color: black; 
 
\t height: 60%; 
 
\t width: 611px; 
 
\t bottom: -10px; 
 
\t left: -10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 
<body> 
 
\t <div class="holderDiv"> 
 
\t \t <img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg"> 
 
\t \t <div class="shadowSimulation"></div> 
 
\t </div> 
 
</body> 
 
</html>

我重视的是什么，我需要得到的图像。在代码示例中，我尝试了z-index，但仍然没有结果。我需要将黑色部分恢复到图像。而已。

来源

2017-08-27 Aghasi Grigoryan

我找到了自己的答案，解决方法是给position: relative一个图像和更高的z-index:以及。

来源

2017-08-27 09:02:55

您是否试图直接向图像或包含它的div添加阴影？

这可能是一个更好的解决方案，因为不同网页浏览器的问题。

这里是一个codepen与修改例子，下面的代码，希望它有助于

CSS：

.holderDiv { 
    position: relative; 
    margin-left: 30px; 
    margin-bottom: 30px; 
    width: 611px; 
    box-shadow: -20px 20px 0 Gray; 
}

来源

2017-08-27 09:18:58 estemon

两个元素定位一个比另一个

回答

相关问题