显示按钮以显示：块属性

Question

我一直在使用这个CSS代码页面的中心显示的图像：

 .img{ 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
     position:relative; 
     } 

     .btn{ 
     position:absolute; 
     margin-top:10%; 
     margin-left:-27%; 
     } 

HTML：

<img src="12345.png" class="img"></img> 
     <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a> 
     <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a> 
     <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a> 

我怎样才能让3标签也是图像显示在图像上？它工作得很好，我添加显示：块。

Answer 1

<div style="position:relative"> 
 
<img src="12345.png" class="img"></img> 
 
<div style="position:absolute"> 
 

 
     <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 
     <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 
     <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 

 
</div> 
 

 

 
</div>

试试这个...将帮助ü更好....

Answer 2

你试过显示器挠性在总体股利。如果您没有图像的整体div，我会添加一个并将其设置为显示：flex;如果你想要在第一个图像前添加z-index：-1;到第一张图片。我更新CSS，但我相信这会起作用。

.spacing { 
 
    display: flex; 
 
}

<div class="spacing"> 
 
    <img src="12345.png" class="img"></img> 
 
    <a href="http://google.ro"><img src="pin.png" class='btn' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 
    <a href="http://google.ro"><img src="pin.png" class='btn1' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 
    <a href="http://google.ro"><img src="pin.png" class='btn2' width="30px" height="48px" alt="http://google.ro" ></img><a> 
 
</div>

 .img{ 
 
     display: block; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     position:relative; 
 
     z-index: -1; 
 
     } 
 

 
     .btn{ 
 
     position:absolute; 
 
     margin-top:10%; 
 
     margin-left:-27%; 
 
     }