Question

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

页面上还有另一个块。如果将其设置为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>

工作位置如何黏着相对窗口？

1 个答案: