为什么我在绝对位置的权利不起作用？答案

【问题标题】：Why is my right at position absolute not working?为什么我在绝对位置的权利不起作用？
【发布时间】：2021-07-16 16:28:57
【问题描述】：

我正在尝试将我的箭头定位在具有相对位置的父 div 的右侧，但到目前为止我还没有成功。

这是我的 HTML：

<div class="button--collapse">
   <h2 class="title" >Your selection</h2>
</div>

和 CSS：

.button--collapse {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    position: relative;
}

.button--collapse:after {
      position: absolute;
      content: "›";
      color: white;
      right: 0;
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      margin-top: 0;
      background-color: transparent;
      transition: all 0.25s;
}

我做错了什么？有人可以帮帮我吗？

谢谢。

【问题讨论】：

为右箭头添加绝对位置
对不起，我已经编辑了我的问题，我已经有了位置：箭头中的绝对值。
删除 transform 属性。工作link

标签： css css-position absolute

【解决方案1】：

您需要为您的右属性添加一个正长度，然后给父级添加一点填充，因为position:absolute 将该元素从文档正常流程中取出。

.button--collapse {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    position: relative;
    border: 1px solid black;
    padding-right: 2rem; /* padding right added to accommodate the after absolute element that si taken out of the normal flow */
}

.button--collapse:after {
      position: absolute;
      content: "›";
      color: black;
      right: 10px; /* add 10px to move over from right 10px */
      top: 50%;
      transform: translateY(-50%) rotate(90deg);
      margin-top: 0;
      background-color: transparent;
      transition: all 0.25s;
}

<div class="button--collapse">
   <h2 class="title" >Your selection</h2>
</div>

【讨论】：