CODEWITHSUNDEEP
htmlcss
Aghasi Grigoryan
Aghasi Grigoryan

Reputation: 77

Two elements positioning one over another

Desired result

.holderDiv{
	position: relative;
}
.shadowSimulation{
	position: absolute;
	background-color: black;
	height: 60%;
	width: 611px;
	bottom: -10px;
	left: -10px;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="holderDiv">
		<img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg">
		<div class="shadowSimulation"></div>
	</div>
</body>
</html>

I have attached an image of what I need to get. In the code sample, I have tried with z-index but still not a result. I need to get the black part back to the image. That's it.

Upvotes: 2

Views: 47

Answers (2)

estemon
estemon

Reputation: 79

Have you tried to add a shadow directly to the image or the div that contains it?

It maybe a better solution because of problems with different web browsers.

Here is a codepen with a modified example, and code below, hope it helps

css:

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

Upvotes: 1

Aghasi Grigoryan
Aghasi Grigoryan

Reputation: 77

I found answer myself, the solution was to give position: relative to an image and higher z-index: as well.

Upvotes: 2

Related Questions