html - 工作位置粘相对窗口怎么办？

Question

假设我们有水平滚动的窗口。

页面上还有一个 block 。如果设置 position: relative 并设置 top: 20px 是否意味着 20px 从窗口顶部可见区域或包括滚动？

Answer 1

这是您的问题的演示。不确定这是否回答了您的问题，请随时编辑。

https://jsfiddle.net/joshmoto/zbc12ayu/1/

@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css";

.scroll-x {
  overflow-x: scroll;
  height: 400px;
  border: 2px dotted #e83e8c;
}

.top-block {
  position: relative;
  top: 20px;
  height: 40px;
  background: rgba(0,0,0,0.75);
  color: #ffffff;
  line-height: 40px;
  text-align: center;
}

.scolling-content {
  background-image: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
  width: 2560px;
  height: 400px;
}

<div class="container mt-3">

  <h4 class="mt-3 mb-3">Scroll Horizontal</h4>

  <div class="scroll-x">
  
    <div class="top-block"><code>position: relative; top: 20px;</code></div>
    <div class="scolling-content"></div>
    
  </div>

</div>