Question

我正在尝试将图像粘贴到页面左侧，如“给出反馈”按钮：

http://www.hotscripts.com/category/scripts/php/

我有以下HTML代码（我有其他代码，但只是为了展示一个例子）：

<img id="btn" class="btn" src="cl.png" height="161" width="34" alt="clear" />

和以下CSS：

#btn {
    display: block;
    position: fixed;
    left: 0;
    top: 54%;
    z-index: 100001;
    width: 34px;
    height: 168px;
    margin: -45px 0 0;
    padding: 0;
    cursor: pointer;
}

由于某种原因，当我滚动页面时，它不会产生相同的效果。我是否必须使用另一个DIV并包裹按钮？

Answer 1

您是否在标记中指定了DOCTYPE声明？这应该有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

将其添加到文档的顶部。

Answer 2

另一种解决方案是使用“粘性”位置。

您可以在CodePen Here.或以下看到代码：

.outer { 
  display: flex;
  height: 100vh;
  width: 100%;
}
.inner {
  height: 100px;
  width: 60px;
  position: sticky;
  top: 54px;
  left: 0;
}

<div class="outer style-one">
  <div class="inner style-two">
    <div class="style-three">
      <a href="#">Feedback</a>
    </div>
  </div>
<div>

使图像元素固定位置，不在滚动上移动

2 个答案: