物の重なりの順番を設定するz-indexプロパティ

2015年6月24日

コンテンツの重なりの順番を設定するときに使用するプロパティは
z-indexプロパティです。posisitonプロパティを一緒に使用することで
要素の重なりの順番を設定できます。z-indexは数値で設定し
数値が大きいほど上になります。

値	説明
数値	値が大きいほど、上に表示される。
auto	親要素と同じ位置。デフォルト値。

    *{margin:0;padding:0;}
    
    #container{
        width:400px;    
        height:400px;
        background-color:#f0f0f0;
        margin:0 auto;
    }

    img{
        position:absolute;
        top:0;
        left:0;
    }
    p{
        position:relative;
        background-color:beige;
    }
    .zindex10{z-index:10;}
    .zindex20{z-index:20;}

*{margin:0;padding:0;}

#container{

width:400px;

height:400px;

background-color:#f0f0f0;

margin:0 auto;

}

img{

position:absolute;

top:0;

left:0;

}

position:relative;

background-color:beige;

}

.zindex10{z-index:10;}

.zindex20{z-index:20;}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <p class="zindex20">こうやって表示されます。</p>
    <img class="zindex10" src="neko.jpg" alt="" width="100" height="100">
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

<p class="zindex20">こうやって表示されます。</p>

</body>

</html>

サンプルコードを見て頂くと分かりますが、
重なり合う要素のどちらにも、今回は
<p>、<img>タグ両方の
positionプロパティを指定する必要があります。