html - 右边不工作但左边在位置 : absolute;

Question

.act{
    text-align: center;
    height: 100%;
    width: 100%;
}

/* arrows*/
.left_arrow{
    top: calc(117.2% + 12.75vh);
    left: 19%;
    transform: rotateZ(90deg);
}

.right_arrow{ 
    top: calc(117.2% + 12.75vh);
    right: 19%;
    transform: rotateZ(-90deg);
}

.act img{
    position: absolute;
}

<div class="act">
            <img src="./landingPage/down arrow black.png" alt="left arrow" class="left_arrow">
            <img src="./landingPage/down arrow black.png" alt="right arrow" class="right_arrow">
</div>

'正确:19%;'在 .right_arrow 处不起作用，但“左”在 .left_arrow 处起作用。

谁知道为什么？

Answer 1

添加position:relative;至 .act类，它应该可以工作

position:absolute;在 img 上元素寻找一个容器来定位自己，这个容器必须在 DOM 中有 x、y、高度和宽度值。给出父元素(在本例中为 .act ) position:relative;使用 img 确保元素具有 x、y、宽度和高度可以放置元素