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处的'left'作用。

有人知道为什么吗？

Answer 1

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

position:absolute;元素上的img寻找一个容器来定位自身，该容器在DOM中必须具有x，y，height和width值。给父元素（在这种情况下为.act）position:relative;确保元素具有x，y，宽度和高度，并且可以放置img元素

Answer 2

@ j.xiang

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

在法线中不再存在绝对定位的元素   文档布局流程。相反，它位于与   其他一切。这非常有用：这意味着我们可以创建   独立的UI功能，不会干扰其他功能的位置   页面上的元素。例如，弹出信息框和   控制菜单；翻转面板；可以拖动的UI功能   放在页面上的任何地方；等等...

第二，请注意，元素的位置已更改-这是   因为上，下，左和右的行为与   绝对定位。而不是指定元素的方向   应该移动，它们指定元素应距的距离   每个包含元素的边。所以在这种情况下，我们说   绝对定位的元素应位于顶部30px   “包含元素”，距左侧30像素。

现在您可能已经熟悉了上面的陈述，这使我们了解了为什么以及定位上下文。

如果没有祖先元素具有明确的position属性   定义，那么默认情况下，所有祖先元素都将具有静态   位置。结果是，绝对定位的元素   将包含在初始包含块中。最初的   包含块具有视口的尺寸，也是   包含元素的块。简单地说，绝对   定位的元素将包含在元素之外，   并相对于初始视口定位。

定位的元素嵌套在HTML源代码的内，   但在最终版式中，它与广告素材的顶部和左侧相距30px   页面的边缘。我们可以更改定位上下文-   绝对定位的元素相对于元素的位置。   这是通过在元素的祖先之一上设置位置来完成的   —将其嵌套在其中一个元素中（您无法将其定位   相对于元素而言，它不嵌套在内部）。为了证明这一点，   在身体规则中添加以下声明：

   position: relative;

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

我希望这会有所帮助，再次开始阅读MDN site，这是一种宝贵的资源。

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

2 个答案: