html - 你能解释一下位置 :absolute property? 这个可能的异常吗

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;
}

窗口在 slider 上方 但是窗口显示在 slider 下方

可能是什么原因？

谢谢

Answer 1

正如 Temani 所说，浏览器从上到下读取 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="">