css z-index問題

Question

新手to z-index。我想將backleftBox和backrightBox放在frontBox後面，但我的代碼看起來不起作用。

<style type="text/css"> 
    #frontBox{ width: 400px; height: 500px; margin: 0 auto; background-color: #ccc; position: relative; z-index: 99;} 
    #backleftBox{ width: 90px; height: 90px; background-color: green; position: absolute; left: -25px; z-index: 12;} 
    #backrightBox { width: 90px; height: 90px; background-color: blue; position: absolute; left: -15px; z-index: 11;} 
    </style> 

<div id="frontBox"> 

    <div id="backleftBox"></div> 
    <div id="backrightBox"></div> 

</div> 

Answer 1

您在這裏遇到的問題是「backleftBox」和「backrightBox」是「frontBox」的子項。只要將它們移到「frontBox」之外，它們就應該放在下面。

Answer 2

backrightBox和backleftBox當它們在裏面時不能位於frontBox後面。不知道你希望它看起來如何，但它們不能像這樣嵌套，然後你必須改變你的位置和邊距屬性來調整它們。 z-index就像你擁有它的方式一樣。