為什么我的div沒有出現在我的影像上方？[復制]-有解無憂

這個問題在這里已經有了答案：為什么具有 z-index 值的元素不能覆寫其子元素？ (4 個回答) 1 小時前關閉。

幾個小時以來一直在對此進行故障排除。一定有一個我沒有看到的簡單原因或解決方案。

我只想在我的影像頂部有一個插入框陰影。

這是我目前擁有的代碼：

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0  25px red inset;
    z-index: 2 !important;
}

.img-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1 !important;
}

<div class="img-container"> 
    <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
 </div>

uj5u.com熱心網友回復：

父子嵌套有問題。父的內部 box-shadow 被影像覆寫。洗掉 z-indexes 并在::after偽元素上添加 box-shadow （然后沒有 z-indexes 是 nessesery）。

<div class="img-container"> 
    <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
 </div>

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
}
.img-container::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   box-shadow: 0 0  25px red inset;
}
.img-container img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

uj5u.com熱心網友回復：

找到了一個適用于我的示例的解決方案，但如果有人有其他想法，希望能有更優雅的解決方案。

猜測父母無法超越其孩子有什么事情嗎？CSS 糟透了。

.img-container {
    position: relative;
    margin: auto 0;
    max-width: 100%;
    max-height: 100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-shadow{
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    box-shadow: 0 0  25px black inset;
}

<div class="img-container"> 
     <img src="https://images.pexels.com/photos/3031397/pexels-photo-3031397.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Photo of Self">
     <div class="box-shadow"></div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/325176.html

標籤：html css

上一篇：如何在div底部居中文本

下一篇：使用后代選擇器時，CSS兄弟選擇器會中斷嗎？[復制]