Question

我必须修理一个蓝色的锁定＆＃39;图像到容器外面，如下所示：

到目前为止，我已经实现了以下目标：

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

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

请告知如何实现这一目标？我的方法是否正确？

Answer 1

如果要根据容器设置锁定按钮，则必须设置容器的相对位置和按钮的绝对位置。

然后根据容器将顶部和右侧属性设置为按钮。

.container {
    position: relative;
}

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

CSS：修复容器体

1 个答案: