右边不工作但左边在位置：绝对；

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>

.right_arrow 处的 'right: 19%;' 不工作，但 'left' 在 .left_arrow 处工作。

有人知道为什么吗？

Answer 1

将 position:relative; 添加到 .act class 应该可以工作

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

Answer 2

@j.xiang,

我强烈建议您阅读：MDN Docs 关于定位。要回答您的代码为何不起作用以及原因的问题：

An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful: it means that we can create isolated UI features that don't interfere with the position of other elements on the page. For example, popup information boxes and control menus; rollover panels; UI features that can be dragged and dropped anywhere on the page; and so on...

Second, notice that the position of the element has changed — this is because top, bottom, left, and right behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.

现在你可能已经熟悉了上面的说法，这给我们带来了原因和定位上下文。

If no ancestor elements have their position property explicitly defined, then by default all ancestor elements will have a static position. The result of this is, the absolutely positioned element will be contained in the initial containing block. The initial containing block has the dimensions of the viewport and is also the block that contains the element. Simply put, the absolutely positioned element will be contained outside of the element, and be positioned relative to the initial viewport.

The positioned element is nested inside the in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page. We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's ancestors — to one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:

   position: relative;

因此，将 position: relative; 添加到您的 .act class 应该可以解决您的特定问题。

我希望这对您有所帮助，再次开始阅读 MDN site 这是一个非常宝贵的资源。

右边不工作但左边在位置：绝对；

right not working but left is at position: absolute;

html

css

css-position