Chạy thử Ví dụ Thuộc tính z-index trong CSS

Trình soạn thảo - Chạy thử Ví dụ Thuộc tính z-index trong CSS

Kết quả - Chạy thử Ví dụ Thuộc tính z-index trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính z-index trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divload {width:100%; height:300px; background:red; float:left; margin-bottom:10px}
#div-fixed-trai{width:200px; height:auto; padding:10px; background: green; color:#fff;bottom:10px;right:10px}
#div-fixed-phai{width:200px; height:auto; padding:10px; background: green; color:#fff;bottom:10px;left:10px}
#ab-zindex1{width:50%; height:90%; background:green;color:#fff; top:10%;right:10px}
#ab-zindex2{width:45%; height:60%; background:blue;color:#fff; top:20%;right:15px}
</style>
</head>
<body>

<h1>Chạy thử Ví dụ Thuộc tính z-index trong CSS</h1>

<p>Dùng để xét thẻ HTML nằm trên thẻ HTML khác, nó đi kèm với thuộc tính position: relative, position: absolute, position: fixed:</p>

<div class="divload" style="position: relative;">
	<p>position: relative;</p>
	<div id="ab-zindex1" style="position: absolute;z-index:1;" >position: absolute;z-index:1;</div>
    <div id="ab-zindex2" style="position: absolute;z-index:2;" >position: absolute;z-index:2;</div>
</div>

<div class="divload"></div>
<div class="divload"></div>

<div id="div-fixed-trai" style="z-index:1;position: fixed">z-index:1;position: fixed</div>

<div id="div-fixed-phai" style="z-index:2;position: fixed">z-index:2;position: fixed</div>

</body>
</html>
  • Chạy thử Ví dụ Thuộc tính z-index trong CSS nằm trong bài viết Thuộc tính z-index trong CSS
  • ★★★★★ ★★★★★