大きな画像の上に小さな画像

Question

小さな灰色のボックスをページの黒いボックスの前の左上にくるようにしようとしています。画像の上の画像。私は灰色のボックスをブラックボックスの上に表示したい。上と左を0に設定し、黒い四角の上に灰色のイメージを移動するためにz-indexを試しましたが、何もありません。

https://jsfiddle.net/Lance_Bitner/zrjttnu1/

.nav-toggle { 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
-webkit-touch-callout: none; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 
text-decoration: none; 
text-indent: -999px; 
position: relative; 
overflow: hidden; 
width: 70px; 
height: 55px; 
float: left; 
display: block; 
margin: 0 -2em 1em 0; 


} 
.nav-toggle:before { 
color: #444; /* Edit this to change the icon color */ 
font-family: "responsivenav"; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
font-size: 28px; 
text-transform: none; 
position: absolute; 
content: url(img/menu2.gif); 
text-indent: 0; 
text-align: center; 
line-height: 65px; 
speak: none; 
width: 100%; 
top: 0; 
left: 0; 
} 
.nav-toggle.active:before { 
font-size: 24px; 
content: url(img/menu3.gif); 
} 

Answer 1

あなたは絶対的なトップセットあなたのNAV-トグルボックスを配置できます：それはIE9が対応している必要があります0;

.nav-toggle { 
    ... 
    position: absolute; 
    top: 0; 
} 

https://jsfiddle.net/Lpyumsck/1/