css z-index问题

Question

新手到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就像你拥有它一样好。