Html 如何将家长部门带到前台？

如何将家长部门带到前台

我的html：-

<div class="main">
 <div class="parent">
    <div class="child"></div>
 </div>
</div>

我的小提琴：

---

父级永远不能在它包含的元素前面

你想这么做吗

css将更像这样

.main{
        width : 400px;
        height: 400px;
        border :1px solid black;            
        position:relative;
    }
    #bottom{
        width: 100px;
        height: 100px;
        position: absolute;
        background: #e3e3e3;
        z-index: 1;
    }
    #top {
        width : 200px;
        height: 200px;
        background: red;
        z-index:2;
        position:absolute;
    }

完整性HTML

<div class="main">
    <div id="top"></div>
    <div id="bottom""></div>
</div>

sambomartin的答案是我将如何做到这一点，但我将只展示让父元素显示在子元素上方是可能的

CSS:

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

<div class="main">
    <div class="parent"></div>
    <div class="child"></div>
</div>

.main {
    width : 400px;
    height: 400px;
    background : green;
    z-index: 10;
}
.parent {
    width: 100px;
    height: 100px;
    position: relative;
    background: yellow;
    z-index: 5;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index : -1;
    margin: -100px 0 0;
}

HTML:

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

<div class="main">
    <div class="parent"></div>
    <div class="child"></div>
</div>

.main {
    width : 400px;
    height: 400px;
    background : green;
    z-index: 10;
}
.parent {
    width: 100px;
    height: 100px;
    position: relative;
    background: yellow;
    z-index: 5;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index : -1;
    margin: -100px 0 0;
}

试试这个：

.main {
    width : 400px;
    height: 400px;
    border :1px solid black;
}
.parent {
    width: 100px;
    height: 100px;
    background: #e3e3e3;
    z-index: 1;
}
.child {
    width : 200px;
    height: 200px;
    background: red;
    z-index: -1;
    position: relative;
}

顺便说一句，要使z索引工作（在
.main
中），您需要将位置设置为
相对
、
固定
或
绝对

最后，这里有一个jsfiddle向您展示它：
我添加了不透明度以保持连续性

梅因先生{

width : 400px;
height: 400px;
border :1px solid black;
background-color:#000000;
opacity:.19;
filter: alpha(opacity=19);
-moz-opacity:.19;
z-index:1;

}

.家长{

width: 100px;
height: 100px;
background: #000000;
z-index: -1;

}

.孩子{

width : 200px;
height: 200px;
background: red;
z-index: -1;
position: relative;

}

相关：你为什么要这么做？在这种情况下，您只需交换父元素和子元素，不是吗？这是不可能的，父元素总是在其子元素（ren）下。不可能将父母的z指数设置得比孩子的高。@panther请查看下面的答案。@GautamKumar请查看我的答案，这是可能的，但正如我所说，我也会这样做。让我看看，你所做的是复制了我的答案。很不错的！哈哈，我发誓我没有交配，没有无限的方法。你应该在发帖前检查其他答案。不需要创建副本。我不打算否决投票，因为这是一个好答案，但下次请注意其他人的答案。很抱歉，我正在键入我的答案，我没有看到其他人弹出：/检查这把小提琴。为什么孩子出现在主道下方？@GautamKumar怎么办？为什么孩子出现在主道下方？@GautamKumar就像我说的那样，我不会这样做。我只是想证明这是可能的。之所以这样做，是因为子对象被设置为-1 z-index。所以它在后台。主div应该有较低的zindex，然后子div出现？这太可怕了。What@Ruddy当你在css中放置背景色时，你的div消失：P用这个css签出。main{背景色：绿色；边框：1px纯黑色；高度：400px；宽度：400px；}。parent{背景：无重复滚动0 0黄色；高度：100px；宽度：100px；z索引：1；}。child{背景：无重复滚动0红色！重要；高度：200px；位置：相对；宽度：200px；z索引：-1；}在这里抛出代码不好。应该解释一下您正在做什么。由于您的代码不清楚，您也没有演示。