Question

我有一个宽度为1080px的标准容器。我希望浮动图像显示在容器的右侧，但是当您向下滚动时，图像也会向下滚动。即使您调整窗口浏览器的大小，我也希望浮动图像能够粘贴到画面的右侧。

我尝试将父div放在相对位置，浮动图像位置为绝对位置，图像将保留在父div的右侧，但是当我向下滚动时，它保持相同位置而不是向下滚动。 / p>

任何帮助都将受到大力赞赏。

这是我到目前为止使用的代码 -

CSS -

.santa-wrapper{
position: relative;
width: 1200px;
margin: 0 auto;
}

.santa{
background-image: url("images/santa-head.png");
background-repeat: no-repeat;
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: 1;
}

.santa-body{
background-image: url("images/santa-body.png");
background-repeat: no-repeat;   
position: absolute;
top: 60%;
right: -20px;
width: 180px;
height: 200px;
z-index: -1;
}

HTML -

<div class="santa-wrapper">
<div class="santa"></div>
<div class="santa-body"></div>
</div>

Answer 1

要使背景图像粘在右下角，您需要将此代码添加到CSS中。

background-position: right bottom;

要让div向下滚动，我想你需要包含一些Javascript。

Answer 2

您可以使用position：fixed;

.fixed-right {
    position:fixed;
    right:0px;
    top:20px;
  }

<img class="fixed-right" src="yourimage.jpg" />

背景图像垂直滚动但粘在容器的一侧

2 个答案: