我有一个有趣的问题或目标。我有一张图片是一个黄色的矩形，里面有三个红色的矩形。我想在图片的顶部添加可点击的按钮作为覆盖，就在红色的矩形上。
问题是，我希望这些按钮总是准确地位于每个红色矩形上，相同的大小/位置，无论图片的纵横比、用户的屏幕分辨率或浏览器的缩放百分比(就好像按钮是图像的一部分(
例如，我包含了一张图片，其中黄色矩形和红色矩形是同一图像的一部分，绿色虚线将是覆盖按钮或它们各自的div。
[图片的知名度不够，但在这里]：https://i.stack.imgur.com/vWpAz.png
我的HTML到目前为止
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<a href=“#”></a>
</div>
</body>
我的CSS到目前为止有效，但应该有更好的方法吗？(当我调整窗口大小并更改浏览器的缩放百分比时有效，但如果我们更改纵横比怎么办？(
.image-container {
display: inline-block;
position: relative;
margin-left: auto;
margin-right: auto;
width: 80vw;
height: auto;
z-index:0;
}
.video {
position: absolute;
width: 100%;
height: auto;
z-index:1;
}
.image-container a{
position: absolute;
margin-top:4.5%;
margin-left: 57%;
width:28.3vw;
height: 7vw;
color:white;
border: 0.25vw solid green;
z-index: 999;
}
}
你知道我该如何以更合乎逻辑的方式做到这一点吗？
如有任何建议，我们将不胜感激。谢谢
我会将锚点包裹在div中使其居中使用px单独定位，同时保持其相对于img的位置。
<body>
<div class="image-container">
<img src="img/justelimage.png" alt="Nature" class="video" />
<div class="link-container">
<a href=“#”></a>
</div>
</div>
</body>
.link-container {
position: absolute;
top: 50%;
left: 50%;
}
如果您还使用背景色设置.image容器的样式和不透明度，你可以切换这些值：悬停。
保持按钮与图像相对应的最佳方式是将容器作为
位置：相对；
和div内的按钮作为
位置：绝对；
并放置在px或任何不随大小变化的单元的顶部和左侧。
但你可以做的一件重要的事情是把你的图像作为image-container的背景。这样按钮总是停留在图像的顶部，并且u可以限制容器的大小以使按钮更好地停留在适当的位置。
我希望这能有所帮助。
.image-container {
position: relative;
background-image: url("https://cdn.pixabay.com/photo/2014/12/28/13/20/wordpress-581849_960_720.jpg");
background-size: contain;
background-position: center;
width: 600px;
height:200px;
}
.btn{
width:20px;
height:20px;
background-color: green;
border:none;
position: absolute;
}
.one{
top:10px;
left:300px;
}
.two{
top:100px;
left:100px;
}
.three{
top:50px;
left:200px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="image-container">
<button href="#" class="btn one"></button>
<button href="#" class="btn two"></button>
<button href="#" class="btn three"></button>
</div>
</body>
</html>