我必须将蓝色的“锁定”图像固定到容器的外部,如下所示:
到目前为止,我已经实现了以下目标:
我将此图像设置为容器的背景图像,而我编写的容器的CSS为:
.container{
margin: 0 auto;
max-width: 620px;
background-color: $white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
object-fit: contain;
margin-top: 30px;
padding: 40px;
min-height: 100px;
object-fit: contain;
overflow: hidden;
border-radius: 5px;
background-repeat: no-repeat;
background-image: url("../lock.svg");
}
<body>
<div class="container">
</div>
</body>
</html>
如果我给出背景位置,则图像隐藏在容器后面,像这样
请指教如何实现这一目标?我的方法正确吗?
最佳答案
如果要根据容器设置锁定按钮,则必须将相对位置设置为容器,将绝对位置设置为按钮。
然后,根据容器将top和right属性设置为按钮。
.container {
position: relative;
}
.button {
position: absolute;
top: some px;
right: some px;
}