如何讓我的div的第一個孩子出現在div後面？

我一直在用我的Z索引摔跤了好幾個小時了。我已經閱讀了很多關於堆疊環境如何改變的內容，但是它一定會超出我的頭腦，因爲我無法得到這個基本示例的工作。如何讓我的div的第一個孩子出現在div後面？

的HTML：

<div class="container"> 
     <a href="#" class="under">under</a> 
<a href="#" class="over">over</a> 


</div>

的CSS：

.container{ 
    float: left; 
background:red 
z-index: 1; 
padding-top: 20px; 
text-align: center; 
margin-top: 50px; 
color: white; 

    background:red; 
    position:fixed; 
} 

.over{ 
height: 100%; 
width: 100%; 
float: left; 
} 

.under{ 
height: 100%; 
width: 100%; 
float: left; 
position: relative; 
float: left; 
top: -20px; 
    z-index:-1; 
}

小提琴：

我不能讓「下」的鏈接出現在容器div的背景背後。

來源

2014-09-02 PrimitiveType

給鏈接一個div，使其易於通過CSS控制。

<div class="container"> 
    <div class="under"><a href="#">under</a> </div> 
    <div class="over"><a href="#" >over</a></div> 
</div> 

.over{ 
height: 100%; 
width: 100%; 
position: absolute; 
float: left; 
top: -20px; 
z-index:2; 
} 

.under{ 
height: 100%; 
width: 100%; 
position: absolute; 
float: left; 
top: -20px; 
z-index:1; 
}

是你想要做什麼來重疊你的兩個鏈接？

來源

2014-09-02 01:39:35 kyyuen

OP正在努力使'通過這種方式，你將看不到.under'去了'.container'背景 – haxxxton 2014-09-02 01:40:10

後面。在原因.container是一個純色，但是，你仍然可以添加（背景：rgba（0，0，0，0.6）;）爲.container css使你的.container具有不透明性，但你的.under鏈接不會可點擊因爲它已被阻止.container – kyyuen 2014-09-02 01:48:38

是的，這就是我想要的。讓我的標籤不可點擊似乎很愚蠢，但我隨後使用javascript進行移動。所以@haxxxton是對的。這個例子在這方面對我不起作用。 – PrimitiveType 2014-09-02 03:44:28

除了缺少分號和重複background性能，你真正的問題在第一位置給.container一個z-index的莖。此代碼爲我工作，而無需創建一個<div>漢堡：

<div class="container"> 
    <a href="#" id="under">under</a> 
    <a href="#" class="over">over</a> 
</div> 

.container{ 
position: fixed; 
background: red; 
padding-top: 20px; 
text-align: center; 
margin-top: 50px; 
color: white; 
} 
.over{ 
height: 100%; 
width: 100%; 
float: left; 
position: relative; 
} 
#under{ 
height: 100%; 
width: 100%; 
position: relative; 
top: -20px; 
z-index: -1; 
}

作爲一個補充說明，你不能浮動，並在同一時間位置的元素。

來源

2014-09-02 01:50:08 theIntern

這不適用於我：http://jsfiddle.net/jpo0y2sL/3/ .under仍然可見 – haxxxton 2014-09-02 01:54:46

嗯，似乎我的解決方案在Firefox中工作，但不是Chrome。給我一點時間。 – theIntern 2014-09-02 01:58:54

你正在寫一些更復雜的風格。基本上，任何孩子不能落後於父母，但在你的情況下，如果你想實現它，父母div（.container）上不應該有任何位置。你可以用下面的例子風格實現它：

.container { 
    border:1px solid green; 
    background-color: #ccc; 
} 
.under, .over { 
    position:relative; 
    width:100px; 
    height:100px; 
} 
.under { 
    border:1px solid black; 
    z-index: -1; 
    } 
.over { 
    border:1px solid red; 
}

來源

2014-09-02 01:54:37

<a href="#" class="under">under</a> 
<div class="container"> 
    <a href="#" class="over">over</a> 
</div> 

.container{ 
position: fixed; 
width:100px; 
height:100px; 
background: rgba(0, 0, 0, 0.5); 
z-index:0; 
} 
.over{ 
float: left; 
width:100%; 
} 
.under{ 
width:100%; 
float: left; 
z-index:-1; 
color:orange; 
}

試試這個

來源

2014-09-02 02:53:41 kyyuen

如何讓我的div的第一個孩子出現在div後面？

回答

相關問題