Xếp chồng phần tử theo trục Z trong CSS
Trong bài học này, chúng ta sẽ xem xét việc xếp chồng các phần tử theo trục Z. Theo mặc định, nếu hai phần tử chồng lên nhau, thì phần tử ở trên sẽ là phần tử xuất hiện phía dưới trong mã HTML.
Hãy xem xét một ví dụ. Giả sử chúng ta có hai phần tử, được định vị tuyệt đối để chồng lên nhau. Trong trường hợp đó, phần tử ở trên sẽ là phần tử xuất hiện phía dưới trong mã HTML:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: #ff8888;
}
#elem2 {
position: absolute;
top: 60px;
left: 60px;
width: 100px;
height: 100px;
background: #7e89eb;
}
:
