当前位置：首页 → 问答吧 → 子元素可以覆盖父元素的边框吗？

子元素可以覆盖父元素的边框吗？

时间：2010-10-12

来源：互联网

如上图  下面那一条线是用border-bottom做的
做切换时需要把下面那条线覆盖掉一部分  这样问题就来了  border并不会计算在内容元素里面而且子元素里的内容覆盖不了父元素的边框
考虑过用定位做  不过相比着有点复杂了  不太实用
另一种方法就是把那个边框用背景图做  这样里面的子元素就能覆盖  这样的话又多了一个HTTP请求纠结啊
哪位有最简单实用的办法可以让子元素里的内容覆盖父元素的边框
或者这样的布局哪位有更好的方法去实现

作者: AyumiHamasaki 发布时间: 2010-10-12

这个可能适合你.
主要是用到z-index
自己琢磨一下

<!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> <title>练习!</title> <meta name="Keywords" content="练习,js,css" /> <meta name="Description" content="我要成为一名优秀的前端开发工程师" /> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} a{text-decoration:none;} .wrap{width:500px;margin:55px auto;font-size:13px;overflow:hidden;} .nav{width:100%;float:left;padding-left:20px;} .nav li{float:left;height:30px;line-height:30px;border:1px solid #6ac334;border-bottom-width:0;margin-right:5px;padding:0 5px;} .nav li a{color:orange;} .content{width:100%;border-top:1px solid #6ac334;float:left;margin-top:-1px;} .current{position:relative;z-index:22;background:white;} .list{display:none;} .content ul{padding-top:10px;} .content li{float:left;width:100px;margin-right:1px;text-align:center;} .content li a{color:#c00;} </style> <script type="text/javascript"> function tab(num){ var nav = document.getElementById("nav"); var list = nav.getElementsByTagName("li"); for(var i=0; i<list.length; i++){ var m = i+1; if(i == num){ list[i].className = "current"; document.getElementById("list_"+m).className=""; } else{ list[i].className = ""; document.getElementById("list_"+m).className="list"; } } } </script> </head> <body> <div class="wrap"> <h1><a href="http://www.poco.cn">POCO</a></h1> <ul class="nav" id="nav"> <li class="current" onclick="tabChange(3);return false;"><a href="http://www.poco.cn">网址导航类</a></li> <li onmouseover="tab(1)"><a href="">图片相册类</a></li> <li onmouseover="tab(2)"><a href="">潮流类</a></li> <li onmouseover="tab(3)"><a href="">空间博客类</a></li> <li onmouseover="tab(4)"><a href="">娱乐社区类</a></li> <li onmouseover="tab(5)"><a href="">其他类</a></li> </ul> <div class="content"> <ul id="list_1"> <li><a href="">hao123网址导航</a></li> <li><a href="">jia123网址大全</a></li> <li><a href="">2345网址导航</a></li> <li><a href="">中国导航</a></li> </ul> <ul class="list" id="list_2"> <li><a href="">手机图片</a></li> <li><a href="">非主流图片</a></li> <li><a href="">图片之家</a></li> <li><a href="">美图拍拍</a></li> </ul> <ul class="list" id="list_3"> <li><a href="">猫扑潮流</a></li> <li><a href="">妆点网男士</a></li> <li><a href="">开奇网</a></li> <li><a href="">pclady论坛</a></li> </ul> <ul class="list" id="list_4"> <li><a href="">敏思博客</a></li> <li><a href="">金羊博客</a></li> <li><a href="">眼镜博客</a></li> <li><a href="">手机博客</a></li> </ul> <ul class="list" id="list_5"> <li><a href="">猫扑贴贴</a></li> <li><a href="">华声娱乐</a></li> <li><a href="">今题网</a></li> <li><a href="">粉丝网明星俱乐部</a></li> </ul> <ul class="list" id="list_6"> <li><a href="">八零秀视觉设计网</a></li> <li><a href="">浙江网闻联播</a></li> <li><a href="">辽一网新闻</a></li> <li><a href="">嘻嘻网</a></li> </ul> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: rao3324180 发布时间: 2010-10-12

晕还是用到定位了
我想说的是除了定位和背景图外还有没有别的方法实现上述要求
最主要的是怎样让子元素覆盖父元素的边框除了用定位没别的方法了吗

作者: AyumiHamasaki 发布时间: 2010-10-12