Скрыть за

Question

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

Я помещаю пример в: example jsfiddle

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

Спасибо за вашу помощь

Answer 1

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

Answer 2

выполнимо с 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 3

Чтобы ответить на ваш вопрос, вам необходимо понять такие понятия, как 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, поскольку всегда создается новый контекст стека.

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

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

Answer 4

Уверен, что (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;
}