CSS 导航~如何能让这个DIV盒子不盖住前面的li的底部边框(只遮盖一个)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 导航~如何能让这个DIV盒子不盖住前面的li的底部边框(只遮盖一个)相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*margin:0px;padding:0px;
ulwidth:1212px;height:40px;margin:60px auto;
ul liwidth:200px;height:40px;background:#eee;border:1px solid red;float:left;list-style-type:none;position:relative;
.contentwidth:1212px;position:absolute;height:600px;background:#eee;top:40px;left:-200px;
</style>
</head>
<body>
<ul>
<li></li>
<li><div class="content"></div></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*margin:0px;padding:0px;
ulwidth:1212px;height:40px;margin:60px auto;
ul liwidth:200px;height:40px;background:#eee;border:1px solid red;float:left;list-style-type:none;position:relative;
/*修正1*/
z-index:3
.contentwidth:1212px;position:absolute;height:600px;background:#eee;top:40px;left:-200px;
/*修正2*/
z-index:1
/*修正3*/
.activez-index:2
</style>
</head>
<body>
<ul>
<li></li>
<!-- 修正4 -->
<li class = "active"><div class="content"></div></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>本回答被提问者和网友采纳
以上是关于CSS 导航~如何能让这个DIV盒子不盖住前面的li的底部边框(只遮盖一个)的主要内容，如果未能解决你的问题，请参考以下文章
css里怎么让div或者其他盒子里的东西宽高不变的任意移动而不被其他东西遮盖住？