我从一个正在进行的项目中提取了以下内容： 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;
}
窗口在滑块上方 但是窗口显示在滑块下方
可能是什么原因？
谢谢
答案 0 :(得分：2)
正如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="">
答案 1 :(得分：0)
更改加载顺序或使用<div class="click-cart">
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span></div>
<div class="olp">
<div class="lakn">
<img class="shop-item-cart" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="shop-title">Product 1</span>
<span class="shop-price">$19.99</span>
<input class="quantity-input" type="number" value="1">
<button class="delete-cart">X</button>
</div></div>
<div class="clear-checkout">
<button class="checkout">Checkout</button>
<button class="clear-cart">Clear Cart</button></div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$10.79</span>
</div>
</div>```
-------------------------------------------------------------------------
let removeCartItemButtons = document.querySelectorAll('.delete-cart');
for (let i = 0; i < removeCartItemButtons.length; i++) {
let button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
let quantityInputs = document.querySelector('.quantity-input');
for (let i = 0; i < quantityInputs.length; i++) {
let input = quantityInputs[i]
input.addEventListener('change', quantityChanged);
}
function removeCartItem (event) {
let buttonCliked = event.target;
buttonCliked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged () {
let input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal ()
}
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelector('.cart-row');
let total = 0
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelectorAll('.quantity-input');
let price = parseFloat(priceElement.innerText.replace('$', ''))
let quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.querySelector('.cart-total-price').innerText = '$' + total;
}
z-index答案 2 :(得分：0)
position属性仅更改元素在 x和y轴上的位置。如果要在z方向上更改元素的位置。使用z-index，则z-index元素的值要高于另一个元素。
答案 3 :(得分：0)
我从所有答案中得出的是以下
1。浏览器从上到下读取html文档 2.在读取第一个编码元素时->将其首先放在屏幕上 3.然后将下一个编码元素放置在已放置的元素之上。
因此，如果我们希望元素A位于元素B之上： 一种方法是先对B进行编码，然后对A进行编码。因为浏览器将先读取B，然后将其首先放在读取的A上，然后将其放在顶部。