时间戳

首页 > 解决方案 > 将绝对定位元素右对齐到其祖先的边缘

javascript - 将绝对定位元素右对齐到其祖先的边缘

问题描述

我有一个已经锚定到其直接父级的绝对定位元素。我当前的设计规范需要其中一些元素与祖先容器的最末端右对齐。我试图在 jQuery 中找到这些坐标，但无论我尝试什么，我似乎都无法得到正确的计算。我的第一个想法是将孩子的偏移量设置为最顶层容器的总宽度并减去孩子的宽度，但由于两者都有填充，所以有点被抛弃了。我在这里想念什么？有没有更好的方法来实现这一点？不幸的是，我必须保留父子位置属性。

$('.child').offset({
  top: $('.parent').offset().top / 2,
  left: $('.container').outerWidth() - $('.child').outerWidth()
});
#container {
  border: 1px solid black;
  padding: 10px;
}

.parent {
  position: relative;
}

.child {
  position: absolute;
  padding: 10px;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <nav id="menu">
    <div class="parent">
      Parent
      
      <span class="child">Child</span>
    </div>
  </nav>
</div>

标签： javascripthtmlcss

解决方案

您可以使用 CSStransform属性进行垂直居中，并将right: 0%其固定在右端。

   #container {
      border: 1px solid black;
      padding: 10px;
    }

    .parent {
      position: relative;
    }

    .child {
      position: absolute;
      padding: 10px;
      top: 50%;
      right: 0%;
      transform: translate(0%,-50%);
    }
<div id="container">
      <nav id="menu">
        <div class="parent">
          Parent
          <span class="child">Child</span>
        </div>
      </nav>
    </div>

推荐阅读