Question

我的网页有问题。我在可滚动<div></div>内的图像顶部放置了一个按钮，此<div></div>位于表格的<td></td>内。图像顶部的按钮具有以下CSS样式：

border:none; 
background-color:transparent;
color:#FFF;
z-index:101;
top:2px;
background-image:url(count.png);
background-size:40px;
width:40px;
height:40px;
padding:0 15px;
font-size:16px;
margin-left:-5px;
cursor:pointer;
position:absolute;

现在问题是当我向下滚动时，按钮保持在同一位置。我想要的是当我向下滚动按钮隐藏在顶部与图像在同一位置。我该怎么做？任何帮助都会非常感激。

jsFiddle：jsFiddle

Answer 1

您可能面临的问题就像定位一样。您将图像position: relative定位到div，而不是图像。如果您将图像包裹在div中，然后设置位置，那么它也会上升。

但是，这只是问题所在，请尝试使用以下内容：

<div class="image-div>
  <img src="src_to_file.png" alt="photo" />
  <button class="button">Button</button>
</div>

您可以将其用作css：

.image-div {
position: relative;
}
.button {
position: absolute;
}

还要确保.image-div不是主要或父级div，就好像它一样！按钮将浮动在它上面，但如果div .image-div是孩子，它将滑动（滚动）。

图像上方按钮的固定位置

1 个答案: