<!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>
<title>锚点位置偏移</title>
<style type="text/css">
body
{
}
div
{
background-color: #fff;
position: relative;
}
.text
{
width: 50%;
height: 100px;
margin: 10px;
border-radius: 5px;
border: 1px solid #f00;
background-color: #ccc;
}
.arrowTip
{
border: 5px solid #ccc;
border-color: transparent transparent #ccc transparent;
width: 0px;
line-height: 0px;
height: 0px;
position: absolute;
display: block;
}
.top
{
left: 40px;
top: -10px;
border-color: transparent transparent #ccc transparent;
}
.left
{
border-color: transparent #ccc transparent transparent;
left: 0px;
top: 30px;
}
.right
{
border-color: transparent transparent transparent #ccc;
left: 50%;
top: 30px;
margin-left: 12px;
}
.bottom
{
border-color: #ccc transparent transparent transparent;
left: 50px;
bottom: -10px;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div>
<span class="arrowTip top"></span>
<div class="text">top 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
</div>
<div class="clear"></div>
<div>
<span class="arrowTip left"></span>
<div class="text">left 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
</div>
<div class="clear"></div>
<div>
<span class="arrowTip right"></span>
<div class="text">right 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
</div>
<div>
<span class="arrowTip bottom"></span>
<div class="text">bottom 底端需要一定高度才可以保证滚动条有足够高度让标题5到达指定位置</div>
</div>
</body>
</html>