css如何让元素始终固定在另一个元素上面，无论元素的长度有多少

Question

<div class="planItem">
        <div class="planSelect">
        </div>
</div>

css:
.planItem{
        width: 100px;
        height: 50px;
        text-align: center;
        float: left;
        position: relative;
    }
.planSelect{
        position: absolute;
        top: -50px;
        right: -70%;
        display: flex;
        background-color: #fff;
        padding: 10px;
    }

因为planselect还有一个箭头对着planitem，感觉我这种写法如果planSelect变长，它的箭头就不会对其planitem，有没有更好的方法，让planSelect无论长度如何改变，始终居中正对planItem

Answer 1

.planSelect{

position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);;
background-color: #fff;
padding: 10px;

}

Answer 2

无图无真相，发个截图看看

Answer 3

.planItem{
    position: relative;
}
.planItem:after{
    content:'';
    position: absolute;
}

Answer 4

你可以试试这样写
.planSelect{

position: absolute;
top: -50px;
right: 50%;
transform: translateX(-50%);
display: flex;
background-color: #fff;
padding: 10px;

}
受教了

Answer 5

css有个属性叫子绝父相，就是说，你要被定位的元素添加相对定位，你要定位的元素添加绝对定位。就会无论什么情况都不会跑偏了

Answer 6

给元素直接父元素添加绝对定位 给子元素添加相对定位就行

Answer 7

left 50%
然后margin-left= - 自身宽度/2