EN
CSS - overlap two div elements
0 points
In this article, we would like to show you how to overlap two div elements using CSS.
Quick solution:
xxxxxxxxxx1
.internal-div {2
position:relative;3
top: 20px;4
left: 20px;5
}
In this example, we present how to create a style for internal div to make the overlapping effect.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
body {7
height: 150px;8
}9
10
div {11
height: 100px;12
width: 100px;13
background: DarkBlue;14
}15
16
.internal-div {17
background: DeepSkyBlue;18
opacity: 75%;19
20
/* required */21
position:relative;22
top: 20px;23
left: 20px;24
}25
26
</style>27
</head>28
<body>29
<div>30
<div class="internal-div"></div>31
</div>32
</body>33
</html>