<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<p>Nếu hai phần tử được định vị chồng lên nhau mà không chỉ định z-index, phần tử được xác định cuối cùng trong mã HTML sẽ được hiển thị ở trên cùng:</p>
<div class="container">
<div class="black-box">Hộp đen</div>
<div class="gray-box">Hộp sám</div>
<div class="green-box">Hộp xanh</div>
</div>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.