Свойства CSS: как свойство z-index определяет z-порядок элемента

Последнее обновление 01 декабря 2018 10:48:54 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Решение:

HTML-код:

<!DOCTYPE html>
<html>
<head>
<title>How z-index property specify the z-order of an element</title>
<style type="text/css">
div {
 width: 100px;
 height: 100px;
 padding: 20px;
 }
 .w3r1, .w3r2, .w3r3, .w3r4 {
 position: absolute;
 }
 .w3r1 {
  background: #ccff00;
  outline: 5px solid #9900CC;
  top: 100px;
  left: 200px;
  z-index: 10;
  }
  .w3r2 {
  background: #0f0fcc;
   outline: 5px solid #fff0CC;
   top: 50px;
   left: 75px;
    z-index: 100;
	}
	.w3r3 {
	background: #cc00ff;
	outline: 5px solid #660066;
	top: 125px;
	left: 25px;
	 z-index: 150;
	 }
	 .w3r4 {
	 background: #00ffcc;
	 outline: 5px solid #FF0099;
	 top: 200px;
	 left: 350px;
	 z-index: 50;
	 }
	 </style>
	 </head>
	 <body>
	 <h3><strong>w3resource Tutorial</strong></h3>
	 <div class="w3r1">w3resource 1. z-index 10
	 <div class="w3r2">w3resource 2. z-index 100</div>
	 <div class="w3r3">w3resource 3. z-index 150</div>
	 </div>
	 <div class="w3r4">w3resource 4. z-index 50</div>
	 </body>
	 </html>

Демонстрация в реальном времени:

Смотрите Pen z-index-answer от w3resource ( @ w3resource ) в CodePen .

Посмотреть решение в браузере

Поддерживаемый браузер