css - 为什么父元素加了position:relative后 子元素a标签失效了
本文介绍了css - 为什么父元素加了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;
}也能点了
这篇关于css - 为什么父元素加了position:relative后 子元素a标签失效了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
