positionrelative啥意思
css3实现三⾓形指向的div
前⾔
在上⼀篇的博客《css3实现各种⾓度的三⾓形》中，已经简单的介绍了各种⽤法，下⾯我们更深⼊地学习如何将这个三⾓形和div绑在⼀起。
设计
⾸先创建⼀个div，再通过：before或者：after在div前⾯或者后⾯添加⼀个三⾓形，将这个三⾓形作为⼀个块级，这个三⾓形的位置是相对于这个div相互绑定的。
html：
<div class="main">
<div class="down">
</div>
</div>
css:
div.main{
margin:0 auto;
margin-top:20px;
width:280px;
background:#abc;
padding:10px;
height:500px;
/*设置圆⾓*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
div.down{
width: 200px;
height: 200px;
background: #aaa;
position:relative;
}
div.down::after{
content:"";
display:block;
position:absolute;
/*top:230px;*/
bottom:-20px;
left:-moz-calc(50% - 10px);
/*chrome safari*/
left:-webkit-calc(50% - 10px);
left: calc(80%);
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #dea;
}
这个绑定的div必须要设置⼀个position属性，⾮等于static的值，因为在前⾯：before添加的这个三⾓形div是相对于绑定的div进⾏定位的，left,right,bottom,top，元素会寻最近⽗级的有position属性的div定位，如果position=‘relative’的话，是相对该元素原来默认（没有⽂档流）的位置定位，并没有脱离⽂档流，仍然占有位置，如果
position=“absolute”的话，是绝对定位，是脱离⽂档流的，相当于在不同的层⾯，所以对于这个绑定的div，⼀般建议脱离⽂档流，即绑定的弹出div设置position=“absolute”
，初始化时，并将其隐藏起来。
特变要注意的是，在：before时样式中必须设置content：'' "，否则这个伪元素是⽆效⽆⽤的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。