重なり合ったブロック要素の表示コントロール
ブロックの一部をクリックすると、そのブロックを一番上側に表示します
このような表示を行うためのポイントは、
要素にtabindex="0"にしてフォーカスを受け取ることが出来るようにすることと、
フォーカスした場合のプロパティにz-indexと共に、positionを使用する点です。
Hello WorldHello WorldHello WorldHello WorldHello World
HTML
<div class="z-index"> <span tabindex="0">Hello World</span><span tabindex="0">Hello World</span><span tabindex="0">Hello World</span><span tabindex="0">Hello World</span><span tabindex="0">Hello World</span> </div>
CSS
.z-index{
position:relative;
margin-bottom:50px;
}
.z-index span{
padding:2em;
display:block;
box-shadow:-6px 0px 3px -3px #9e9ea6;
border:1px solid #aaa;
}
.entry-content .z-index span:focus{
z-index:6;
background:#fff;
position:relative;
outline:none;
transition-duration: 1s;
}
.z-index span:nth-child(1){
z-index:1;
margin-left:142px;
background:rgba(222,222,222,.3);
}
.z-index span:nth-child(2){
z-index:2;
margin-left:284px;
margin-top:-40px;
background:rgba(222,222,222,.3);
}
.z-index span:nth-child(3){
z-index:3;
margin-left:426px;
margin-top:-90px;
background:rgba(243, 156, 18,.3);
}
.z-index span:nth-child(4){
z-index:4;
margin-left:568px;
margin-top:-90px;
background:rgba(52, 152, 219,.3);
}
.z-index span:nth-child(5){
z-index:5;
margin-left:710px;
margin-top:-90px;
background:rgba(192, 57, 43,.3);
}