Как работает позиция закрепления относительно окна?

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>