为什么我给big 加上上位置为absolute 或 relative ，hr 就不显示了？求解答
<html>
<head>
<style type="text/css">
hr {
width: 0.5%;
height: 45%;
border: none;
border-left: 2px dashed #60b654;
background-color: white;
position: absolute;
top: 10px;
left: 40px;
z-index: -1;
}
table{
width:20%;
height:30%;
}
#big{
width:200px;
height:100px;
position:absolute;
background:pink;
}
</style>
</head>
<body>
<div id="big">
<tabel>
<tbody>
<tr>
<td>
<div style="background:red;width:50px;height:70px;">
<hr >
</div>
</td>
</tr>
</tbody>
</tabel>
</div>
<h1>这是一个标题</h1>
/* position 子元素会继承父元素的position属性吗，？求解答*/
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
miniLab浏览 1286回答 1
1回答
-
stone310
因为hr的width: 0.5%;和 height: 45%;这两个属性意思是相对上一个拥有absolute或者relative定位的元素，如果未找到，则相对屏幕；原来#big没加上position:absolute的时候，height:45%是相对屏幕高度的45%，你可以看得见伸出来的那一部分；现在设置了#big的定位，就是相对于#big了，相当于#big的height的45%(即45px)，然后z-index还是-1，所以就被挡住看不见了
随时随地看视频慕课网APP
CSS3
Html/CSS
Html5