效果实现了，但是没理解为什么要设置绝对定位，高手们谁知道？ /*使用伪元素制作导航列表项分隔线*/ .nav li:after{ content:""; width:1px; height:20px; position:absolute;/*为什么要设置绝对定位*/ top:15px; right:0px; background-image:linear-gradient(to top,#f00,#000);
绝对定位脱离文档流，且具有跟随性，即紧随在它之前的元素（未设置绝对定位的元素）的后面，且不占据任何空间。这个时候给他设置top， right 从而完美控制伪元素的位置，且不需要加入padding margin 以免影响整体宽高值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
position: relative;
}
span{
position: absolute;
}
.test{
display: block;
box-sizing: border-box;
width:100px;
height:100px;
position: absolute;
background:#3f3f3f;
padding:20px 20px;
color:white;
bottom:300%;
left:-50px;
visibility: hidden;
}
.test::after{
top:100%;
content: " ";
border-width:20px;
border-style: solid;
position: absolute;
background:#3f3f3f;
border-color: black white white white;
margin-left:50%;
left:-20px;
}
.a{
margin-left:40px;
display: block;
position: relative;
margin-top:200px;
}
.a:hover .test{
visibility: visible;
}
</style>
</head>
<body>
<p>asdfasdf
<span>sdf</span></p>
<a href="" class="a">
<div class="test">
hello world!
</div>
sd
</a>
</body>
</html>
创建一个透明图像
原文地址：https://www.cnblogs.com/webcyh/p/11332688.html
时间： 2024-10-31 04:20:46