Question

我的div里面嵌套了div，我希望改变它们的显示顺序，而不用更改HTML结构。

<div class="round">
    <div class="progress"></div>
</div>

起初我给了内部div一个z-index -1并且它有效，但我需要它超过0所以我给它z-index { {1}}和父div 1。问题在于，无论z-index的值是什么，我给父母，只要他有这个属性，订单就会恢复正常。

除2之外，两个div都有position，因此static应该影响它们。

z-index

http://jsfiddle.net/ilyaD/JeVA9/4/

Answer 1

请检查HTML和CSS代码中的一个小变化。也许这可以帮助.....

<div>
    <div class="round"></div>
    <div class="progress"></div>
</div>


.round {
    background-color: yellow;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    position: relative;
   z-index: 2;  
}

.progress {
    position: absolute;
    background-color: #6eb348;
    border-radius: 50%;
    top: 3px;
    height: 110px;
    width: 110px;
    bottom: -4px;
    left: 3px;
    right: -4px;
    z-index: 1; 
}

据我所知，您可以根据.progress类中的要求调整顶部，底部，左侧和右侧区域。但这会有所帮助......

使用z-index反转元素html顺序

1 个答案: