我正尝试在图像的右上角添加一个按钮。我希望无论显示屏大小如何,按钮始终保持在此位置(响应)。
我尝试添加一个容器,并将其位置设置为relative
,而按钮的位置为absolute
,但是每当我调整显示屏大小时,按钮并不粘在图像的右上角。
下面是我的代码的一个工作片段:https://jsfiddle.net/3qb6vezo/
HTML代码:
<div class="anaglyph">
<div class="container">
<button class="btn_3d">
<img class="btn_3d_img" src="https://i.ibb.co/nbBbTsF/3d-glass.png" alt="3D button" >
</button>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="anaglyph_img" src="https://i.ibb.co/10hgVBm/cathedrale-rue.png">
</div>
</div>
CSS代码:
.anaglyph_img{
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
-o-object-fit: contain;
object-fit: contain;
}
.container {
position: relative;
width: auto;
}
.btn_3d{
//border: none;
//background: none;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
width: auto;
height: auto;
right:34%;
top:50%;
-webkit-transform: translate(-5%, 5%);
-moz-transform: translate(-5%, 5%);
-ms-transform: translate(-5%, 5%);
-o-transform: translate(-5%, 5%);
transform: translate(-5%, 5%);
z-index: 1;
}
.btn_3d_img{
width: 80px;
height: auto;
}
1条答案
按热度按时间e4yzc0pl1#
将您的CSS更改为:
我从
.anaglyph_img
中删除了position: fixed;
。不需要这个属性,因为它使图像固定在视口中,这会导致按钮随图像滚动。我将
.btn_3d
的right
和top
值更改为0
,这将使按钮位于容器的右上角。从
.btn_3d
中删除transform
属性。您不需要此属性,因为它会导致按钮从右上角移开。