我有问题，我在属性之后使用为工具提示制作箭头。当我将其（箭头）位置设置为绝对时，其位置会根据身体而不是主要div 的位置而改变。例如，当我将箭头的位置设置为左侧时：100％它会向身体的左侧移动，这会给我带来麻烦。
当我相对于左侧设置其位置时：100％它向主左侧移动div但是失去了它的实际形状
问题：如何设置箭头的位置它保持其实际形状并且它的位置设置在左侧主div？
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToolTip</title>
<style>
#mainDiv{
width: 300px;
height: 150px;
border: 1px solid pink;
background:pink;
margin-right: auto;
margin-left: auto;
margin-top: 15em;
}
#mainDiv:after{
content: '';
position: relative;
border-top: 10px solid green;
border-right: 10px solid blueviolet;
border-bottom: 10px solid yellow;
border-left: 10px solid red;
width:0px;
height: 0px;
left: 98%;
top: 50%;
}
</style>
</head>
<body>
<div id="mainDiv">
</div>
</body>
答案 0 :(得分：2)
您希望将position:relative;添加到#mainDiv，将position:absolute;添加到#mainDiv:after。