phpstudy集成环境

 首页 > 为什么父元素加了position:relative后 子元素a标签失效了

为什么父元素加了position:relative后 子元素a标签失效了

这是代码
实在是不明白 在2个元素叠加之后 试了很多次 怎么也不能让a标签可以点击

<!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" />
</head>
<body>
   <style>
   .cs{width:1000px;height:200px;margin:0px auto;background:#000;}
   .cs1{width:100%;height:300px;background:#999;position:relative;top:-50px;z-index:-100;overflow:hidden;}
  .cs1 a{font-size:30px;display:block;margin-left:550px;color:#fff;margin-top:150px;}
   </style>
   <div class="cs">
</div>
<div class="cs1">
<a href="#">test</a>
</div>
</body>
</html>
.cs{width:1000px;height:200px;margin:0px auto;background:#000;position: relative;z-index: 2}
.cs1{width:100%;height:300px;background:#999;position:relative;top:-50px;overflow:hidden;}

给cs加上position:relative;z-index:2，去掉cs1的position:relative
由于你原来给cs1直接加了个z-index：-100，导致它层级非常低，低于body，如果你给body加

body{
    position: relative;
    z-index: -200;
}

也能点了

你都设置div的z-index: -100; 还怎么点.

【热门文章】
【热门文章】