Question

我有一个菜单，一个带背景颜色的div。但当缩放菜单后面的div。但它必须在缩放时推动div。 #blauwblok必须是绝对位置，因为其他东西必须超过div，而不是菜单。

<nav>
<ul>
    <li><a href="#">Doelstellingen</a></li>
    <li><a href="#">Producten</a></li>
    <li><a href="#">Klantcases</a></li>
    <li><a href="#">Company</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Resources</a></li>
</ul>
</nav>

<div id="blauwblok">
</div>


#blauwblok{
width: 100%;
background-color: #a2c1e8;
height: 13em;
position: absolute;

}

https://jsfiddle.net/rwx944qc/

Answer 1

您可以向z-index元素添加更高的nav元素。请记住z-index属性还需要设置一个位置：

＆＃13;

#blauwblok {
  width: 100%;
  background-color: #a2c1e8;
  height: 13em;
  position: absolute;
}
nav {
  float: right;
  margin-right: 3em;
  margin-top: 2.5em;
  z-index: 10;/*add z-index*/
  position: relative;/*add position relative*/
}
@media (max-width: 1535px) {
  nav {
    margin-bottom: 1em;
  }
}
li {
  display: inline;
  margin-right: 1em;
}
a {
  text-decoration: none;
  color: black;
  font-family: "lato" sans-serif;
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Doelstellingen</a>
    </li>
    <li><a href="#">Producten</a>
    </li>
    <li><a href="#">Klantcases</a>
    </li>
    <li><a href="#">Company</a>
    </li>
    <li><a href="#">Support</a>
    </li>
    <li><a href="#">Resources</a>
    </li>
  </ul>
</nav>

<div id="blauwblok">
</div>

＆＃13;

z-index

Answer 2

尝试在导航元素上使用position: relative和更大的z-index：

＆＃13;

#blauwblok{
	width: 100%;
	background-color: #a2c1e8;
	height: 13em;
	position: absolute;
	z-index: 100;
}

nav{
    position: relative;
	float: right;
	margin-right: 3em;
	margin-top: 2.5em;
    z-index: 200;
}

@media (max-width: 1535px){
	nav{
		margin-bottom: 1em;
	}
}

li{
	display: inline;
	margin-right: 1em;

}



a{
	text-decoration: none;
	color: black;
	font-family: "lato" sans-serif;

}

＆＃13;

<nav>
	<ul>
		<li><a href="#">Doelstellingen</a></li>
		<li><a href="#">Producten</a></li>
		<li><a href="#">Klantcases</a></li>
		<li><a href="#">Company</a></li>
		<li><a href="#">Support</a></li>
		<li><a href="#">Resources</a></li>
	</ul>
</nav>

<div id="blauwblok">
	</div>

＆＃13;

Answer 3

绝对元素将始终突破您的布局，并在顶部可见。除非您的父级div位置relative。

您也可以使用z-index将您的菜单放在蓝框顶部，但我建议您重新考虑使用绝对定位。

Answer 4

我修好了。我删除了float：right并将其替换为text-align：right。

当缩放菜单落在div后面时，为什么？

4 个答案: