开发者社区> 问答> 正文

为什么父元素加了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>

展开
收起
杨冬芳 2016-06-23 15:13:21 3397 0
1 条回答
写回答
取消 提交回答
  • IT从业
    .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;
    }

    也能点了

    2019-07-17 19:46:23
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载