Можете ли вы объяснить эту возможную аномалию в положении: абсолютное свойство?

Question

Я извлек следующее из проекта, над которым я работаю: https://jsfiddle.net/x5oq3be6/

изображение, которое я ожидаю быть ниже, отображается над другим изображением это нормально?

в коде

<div id="container">
<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">
<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">

</div>

и CSS

#container{
  position:relative;
}
#window,#slider{
  position:absolute;


}

#slider{
  top:-40px;
}

окно находится над слайдером однако под ползунком появляется окно

в чем может быть причина?

спасибо

Answer 1

Как сказал Темани, браузер читает HTML сверху вниз.Вот пример по вашему вопросу о другом порядке изображений.https://jsfiddle.net/L8ez6h5p/7/

Пример:

<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">
<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">

В сравнении с

<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">
<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">

Answer 2

из всех ответов я получаю следующее

1. браузер читает html-документ сверху вниз 2. по мере чтения первого закодированного элемента -> сначала помещает его на экран3. затем следующий кодированный элемент помещается поверх уже размещенного элемента.

Так что, если мы хотим, чтобы элемент A был поверх элемента B: один из способов сделать это - сначала кодировать B, а затем код A.Браузер прочитает B и поместит его сначала в чтение A и поместит его сверху.

Answer 3

Атрибут

position в css изменяет только положение элемента в x и оси y . Если вы хотите изменить положение элемента в направлении z.используйте z-index, большее значение элемента z-index будет выше другого элемента.

Answer 4

Изменить порядок загрузки или работы с z-index

#window {
  z-index: 1;
}
#slider {
  z-index: 0;
}