我必须将蓝色的“锁定”图像固定到容器的外部,如下所示:

css - CSS:将图像固定在容器主体之外-LMLPHP

到目前为止,我已经实现了以下目标:

css - CSS:将图像固定在容器主体之外-LMLPHP

我将此图像设置为容器的背景图像,而我编写的容器的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>


如果我给出背景位置,则图像隐藏在容器后面,像这样

css - CSS:将图像固定在容器主体之外-LMLPHP

请指教如何实现这一目标?我的方法正确吗?

最佳答案

如果要根据容器设置锁定按钮,则必须将相对位置设置为容器,将绝对位置设置为按钮。

然后,根据容器将top和right属性设置为按钮。

.container {
    position: relative;
}

.button {
    position: absolute;
    top: some px;
    right: some px;
}

10-05 21:00
查看更多