z-index不適用於相對位置

Question

我已經為這個問題創造了一個小提琴（但他們希望我也在這里發布代碼：/）。 我希望“英雄”div在懸停時位於另一個（重疊）的頂部。 但它正在轉移其他的，我給它一個高z指數和相對定位，仍然沒有。 任何人都可以告訴我如何在懸停時從div的背景屬性中刪除線性漸變而不再在下面指定背景：hover。

 .holder { margin-top: 10vh; margin-left: 10vw; width: 90vw; height: 90vh; position: relative !important; z-index: 0; } .hero { height: 100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; width: 20%; display: inline-block; z-index: 0; position: relative !important; } #first { background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); } #second { background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); } #third { background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); } #fourth { background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); } .hero:hover { z-index: 1000 !important; width: 27vw; cursor: pointer; } 

 <div class="holder"> <div class="hero" id="first"></div> <div class="hero" id="second"></div> <div class="hero" id="third"></div> <div class="hero" id="fourth"></div> </div> 

https://jsfiddle.net/aks30498/8waty2m9/27/

Answer 1

使用相同的屬性（背景）設置漸變和圖像，因此您無法使用z-index處理此問題。 您可以更改background-size ，以便在懸停時隱藏漸變。 然后你可以依靠比例變換來使圖像更大並與另一個重疊：

我刪除了不必要的代碼

 .holder { margin-top: 10vh; margin-left: 10vw; width: 90vw; height: 90vh; } .hero { height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; width: 20%; display: inline-block; } #first { background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); } #second { background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); } #third { background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); } #fourth { background-image: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); } .hero:hover { background-size: 0 0, cover; transform:scale(1.4); cursor: pointer; } 

 <div class="holder"> <div class="hero" id="first"> </div> <div class="hero" id="second"> </div> <div class="hero" id="third"> </div> <div class="hero" id="fourth"> </div> </div> 

Answer 2

Temani Afif的解決方案非常好，但我會添加一些額外的信息：

我希望“英雄”div在懸停時位於另一個（重疊）的頂部。 但它正在改變其他的

position : relative不會從父元素“分離”元素，只有position:absolute和position:fixed它，所以你有2個選項：

選項1

使用position: absolute在你.hero類，因為你要設置的屬性我不建議這個解決方案 left在每一個英雄（和上：懸停效果會更好），它不是一個干凈的解決方案，但我會告訴你我的意思是 ：

 .holder{ margin-top:10vh; margin-left: 10vw; width:90vw; height:90vh; position : relative; } .hero{ height:100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; width:20%; display:inline-block; position:absolute; transition: transform .2s, z-index 0.2s; z-index: 0; } #first{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); left : 0% } #second{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); left : 20% } #third{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); left : 40% } #fourth{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); left : 60% } .hero:hover{ cursor:pointer; width: 27vw; z-index: 1000; } 

 <div class="holder"> <div class="hero" id="first"> </div> <div class="hero" id="second"> </div> <div class="hero" id="third"> </div> <div class="hero" id="fourth"> </div> </div> 

正如你所看到的，不再有任何轉移，但正如我所說，不要使用這個解決方案。

選項2

使用Temani Afif的解決方案（他的解決方案使用transform:scale(1.4);在懸停時）

注意：如果要為transform屬性設置動畫，則還需要為z-index屬性設置動畫以獲得更好的結果（如果省略z-index，則會出現奇怪的重疊問題），在這種情況下，您必須設置position:relative英雄級別的position:relative ：

 .holder{ margin-top:10vh; margin-left: 10vw; width:90vw; height:90vh; } .hero{ height:100%; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; width:20%; display:inline-block; position:relative; transition: transform .2s, z-index 0.2s; z-index: 0; } #first{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/86S4kU6.jpg'); } #second{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/smyum62.jpg'); } #third{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/1APBHId.jpg'); } #fourth{ background: linear-gradient( rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('https://i.imgur.com/a1zVpPz.jpg'); } .hero:hover{ cursor:pointer; transform: scale(1.5); z-index: 1000; } 

 <div class="holder"> <div class="hero" id="first"> </div> <div class="hero" id="second"> </div> <div class="hero" id="third"> </div> <div class="hero" id="fourth"> </div> </div> 

在這個小提琴你可以嘗試差異： https ： //jsfiddle.net/8waty2m9/73/

• 頂部：使用z-index
• 底部：沒有z-index