CodePen Embed - ZEOpmJe

<h1>要素の重なり順</h1>

<div id="wrap">
  
  <div id="red"></div>
  <div id="blue"></div>
  <!--- blueを後に記述しても、
ブルーが前面になる。------->
  <div id="yellow"></div>
</div>


#wrap{position:relative;}
#red{position:absolute;
width:200px;height:200px;
background-color:red;
z-index:100;}

#blue{position:absolute;
width:150px;height:150px;
background-color:blue;
left:80px;top:80px;
z-index:100;}


#yellow{position:absolute;
width:100px;height:100px;
background-color:yellow;
left:20px;top:30px;
z-index:100;}

This Pen is owned by nakatax on CodePen.

See more by @cocohp on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.