HTML/CSS複数の画像が重なっています

Question

だから私が作ろうとしているのは、矢印/ポインタの2つの画像がバナー（別の画像）に重なっていることです。

2本の矢印をイメージの「上」にして、左上と右下の中央に合わせるにはどうすればよいですか？

ここで私は今のところ持っているものの画像です： http://prnt.sc/b8govy

と私は（上の画像のために）使用しているコード：

img#art { 
 
display: block; 
 
margin-right: auto; 
 
margin-left: auto; 
 
width: 100%; 
 
height: 100%; 
 
max-height: 300px; 
 
z-index: -1; 
 

 
} 
 

 
img#raw { 
 
    display: block; 
 
    margin-left: auto; 
 
    z-index: 2; 
 
} 
 

 
img#law { 
 
    display: block; 
 
    margin-right: auto; 
 
    z-index: 1; 
 
}

<div id="main"> 
 
    \t 
 
    \t <img id="raw" src="images/rightarrow.png"> 
 
    \t <img id="law" src="images/leftarrow.png"> 
 
    \t <img id="art" src="images/banner.png"> 
 

 
    </div>

Answer 1

あなたは矢印にposition absolute、親にrelativeを使用する必要があります。

.banner { 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.arrow.left { 
 
    top: 50%; 
 
    left: 15px; 
 
    margin-top: -15px; 
 
    
 
    width: 0; 
 
    height: 0; 
 
    border-top: 15px solid transparent; 
 
    border-bottom: 15px solid transparent; 
 
    border-right: 15px solid #000; 
 
} 
 

 
.arrow.right { 
 
    top: 50%; 
 
    right: 15px; 
 
    margin-top: -15px; 
 
    
 
    width: 0; 
 
    height: 0; 
 
    border-top: 15px solid transparent; 
 
    border-bottom: 15px solid transparent; 
 
    border-left: 15px solid #000; 
 
}

<div class="banner"> 
 
    <div class="arrow left"></div> 
 
    <div class="arrow right"></div> 
 
    
 
    <img src="http://placehold.it/400x200/?text=Banner"> 
 
</div>

Answer 2

• すべてdisplay: block; margin-left: auto; margin-right: autoを削除します。
• position: relative; z-index: -1;をバナーに使用してください。
• top: -Xpx;で移動してください。 //または他のユニット（VH、REM、EM）
• 両方の矢印z-index: 2
• はここ

float: rightは、ウェブからのランダムな写真とフィドルだランキングarrow float: left

を左 https://jsfiddle.net/warkentien2/xLo1ac5e/