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:auto; } #b{ width:200px; height:200px; background-color:blue; position:absolute; 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ị auto.</p> <p>=> Suy ra độ ưu tiên hiển thị của phần tử #a là mặc định, mà mặc định thì phần tử #a có độ ưu tiên hiển thị thấp hơn phần tử #b (vì phần tử #a khai báo trước phần tử #b)</p> <p>=> Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị bên dưới 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:auto; } #b{ width:200px; height:200px; background-color:blue; position:absolute; 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ị auto.</p> <p>=> Suy ra độ ưu tiên hiển thị của phần tử #a là mặc định, mà mặc định thì phần tử #a có độ ưu tiên hiển thị thấp hơn phần tử #b (vì phần tử #a khai báo trước phần tử #b)</p> <p>=> Điều đó đồng nghĩa với việc phần tử #a sẽ hiển thị bên dưới phần tử #b.</p> <div style="position:relative"> <div id="a"></div> <div id="b"></div> </div> </body> </html>