css - 将元素置于顶部

Question

我在将对象放置在我的网站上时遇到一些问题...

我只想放置 coloured items ùnder the main container .所以 navigation_groups div 应该放在 main_container 下。

<div class="navigation_groups">
     // Navigation              
</div>
<div class="main_container">
    <div class="main_container_top"></div>
    <div class="main_container_middle"></div>
    <div class="main_container_bottom"></div>
</div>

我试过使用 position，但出于某种原因，如果我添加 absolute 或 relative 属性， de navigation_groups 消失了...我该如何解决这个问题？

z-index 属性也不起作用...

Answer 1

问题是，当您将菜单放在背面时，它变得无响应，因为内容 div 完全覆盖了菜单空间..

您需要以不同的方式重新设置元素的样式..

.main_container {
    margin: -90px 0 0 132px;
    position: relative;
}

.main_container_top {
    /*whatever you have but change the positioning of the background image to*/
    background-position: 0 10px;
}

.main_container_middle {
    /*whatever you have but change the positioning of the background image to*/
    background-position: 0 10px;
    /*and the padding to*/
    padding: 30px 0 30px 56px;
}

.main_container_bottom {
    /*whatever you have but change the positioning of the background image to*/
    background-position: -7px 0;
}

.navigation_groups {
    /*change the following to*/
    position: relative;
    z-index:0;
}

除了移除负 z-index 之外，我们实际所做的是将元素向右移动 124px，并通过将它们的填充和背景定位修正相同的量来修复所有受影响的元素。