Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #a{ width:200px; height:200px; background-color:green; position:absolute; z-index:10; } #b{ width:200px; height:200px; background-color:blue; position:absolute; z-index:5; top:100px; left:100px; } </style> </head> <body> <p>- Phần tử #a được thiết lập thuộc tính z-index với giá trị 10</p> <p>- Phần tử #b được thiết lập thuộc tính z-index với giá trị 5</p> <p>=> Suy ra độ ưu tiên hiển thị của phần tử #a lớn hơn độ ưu tiên hiển thị của phần tử #b.</p> <p>=> Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị đè lên phần tử #b.</p> <div style="position:relative"> <div id="a"></div> <div id="b"></div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #a{ width:200px; height:200px; background-color:green; position:absolute; z-index:10; } #b{ width:200px; height:200px; background-color:blue; position:absolute; z-index:5; top:100px; left:100px; } </style> </head> <body> <p>- Phần tử #a được thiết lập thuộc tính z-index với giá trị 10</p> <p>- Phần tử #b được thiết lập thuộc tính z-index với giá trị 5</p> <p>=> Suy ra độ ưu tiên hiển thị của phần tử #a lớn hơn độ ưu tiên hiển thị của phần tử #b.</p> <p>=> Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị đè lên phần tử #b.</p> <div style="position:relative"> <div id="a"></div> <div id="b"></div> </div> </body> </html>