Скрыть за

Question

Я пытаюсь сделать простую мысль, но я застрял. У меня есть div "прокрутка" с фиксированной позиции. Когда я прокручиваю страницу, я хочу, чтобы div "scrolling" шел позади всех остальных div ниже.

Я положил пример в: пример JSFIDDLE

.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
}

Спасибо за помощь

Answer 1

Выполнимо с z-index, Но чтобы z-index работал, он должен быть position: absolute, position:fixed, или же position:relative,

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
    background-image: linear-gradient(pink, green);
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index:4;
}

<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>

<div style="width:auto; height:50px; background-color:grey;position:relative;z-index:5">

</div>
  
<div style="width:auto; height:350px; background-color:grey;position:relative;z-index:5">
  I want to be in displayed in front
</div>

Answer 2

Вам нужно использовать больше z-index для элемента, который вы хотите видеть, и использовать меньше z-index для элемента "позади".

Answer 3

Уверен, что (z index) это то, что вы хотите использовать здесь.

Я обновил вашу скрипку ниже. Индекс Z позволяет вам позиционировать спереди назад.

<div class="top">
  <div>
    Hello
  </div>
  <div>
    Hello
  </div>
</div>
<div class="scrolling">
  SCROLL
  <br>
  I want to stay behind the div grey
</div>


<div class="front" style="width:auto; height:350px; background-color:grey;">
  I want to be in displayed in front
</div>

.top{
  width:auto;
  background-attachment: fixed; 
  height:300px;  
  background-image: linear-gradient(pink, green);
  z-index: 0;
}
.scrolling{
  top: 230px;
  background-color:lightblue;
  margin:auto;
  width:100%;
  text-align:center;
  position:fixed;
  z-index: 0;
}
.front{
  z-index: 1;
  position: relative;
}

Answer 4

Чтобы ответить на ваш вопрос, вам необходимо понять такие понятия, как z-index и / или как работает порядок наложения. Есть отличные статьи, в которых объясняется z-index, но мне особенно нравится то, что никто не сказал вам о z-index.

Фрагмент приведенной выше статьи:

Когда вы вводите свойство position в микс, любые позиционированные элементы (и их дочерние элементы) отображаются перед любыми позиционированными элементами. (Сказать, что элемент "позиционирован", означает, что он имеет значение позиции, отличное от статического, например, относительное, абсолютное и т. Д.)

Интересно, что есть свойство CSS3, которое делает нечто подобное. Вы можете решить вашу проблему без необходимости явного применения z-индекса, используя transform,

Например, если мы применяем transform: translateX(0) к вашему JSFiddle вы увидите, что серый div теперь находится над вашим текстом. Вот обновленная скрипка:

https://jsfiddle.net/gh94Lbad/

<div style="width:auto; height:50px; background-color:grey; transform: translateX(0)"></div>
<div style="width:auto; height:350px; background-color:grey;transform: translateX(0)">I want to be in displayed in front</div>

Причина transform Работы (путем изменения контекста стека) объясняется в спецификации:

Для элементов, макет которых определяется блочной моделью CSS, любое значение, отличное от none, для свойства transform приводит к созданию контекста стека. Реализации должны рисовать слой, который он создает, в своем родительском контексте стека, в том же порядке стека, который был бы использован, если бы это был позиционированный элемент с z-index: 0. Если позиционируется элемент с преобразованием, свойство z-index применяется, как описано в [CSS2], за исключением того, что auto обрабатывается как 0, поскольку всегда создается новый контекст стека.

Изменить: Как указал @TemaniAfif, вероятно, лучше объяснить, как это работает, объяснив paint order из ваших элементов:

Для этого вам нужно рассмотреть порядок рисования (w3.org/TR/css-position-3/#painting-order), где вы обнаружите, что преобразованный элемент окрашивается позже, поэтому он выше. (на этапе (8))