相对于非父元素定位一个元素的位置

Question

相对于非父元素定位一个元素的位置

6

考虑到像对话框、模态窗口、工具提示等组件应该比 HTML 页面中其他任何元素都要具有更高的堆叠顺序，因此我将这些组件放置在一个立即相邻于 root 元素的组件中，其中放置了所有其他元素。React 开发者很快就能识别出这一点，并知道我正在尝试使用 React Portals。您可以在此处可视化它：

<body>
  <div id="root">
    // ----- other elements -----
    <div id="supposed-parent" />
    // ----- other elements -----
  </div>
  <div id="dialog-container">
    <div id="supposed-child" />
  </div>
</body>

所以，我该如何将#supposed-child定位在#supposed-parent旁边？感谢任何帮助。

- sdabrutas

你可以只使用 CSS。 https://www.w3schools.com/css/css_positioning.asp 在你的例子中，使容器 position: relative，可能是 <body> 或实际例子中的另一个 div，然后两个 <div> 使用所需的定位属性为 position: absolute。或者，你可以使用 CSS 网格，并将它们的父元素移到所需位置 https://css-tricks.com/snippets/css/complete-guide-grid/。 - DCTID

我对React很熟悉，但不明白你的意思。这也可能是一个纯CSS问题。不知道你想要实现什么，可以举个例子吗？ - hackape

通常，要将一个元素相对于另一个组件定位，只需将该元素作为另一个组件的子元素，然后在这些元素的样式中添加 position: relative 和 position: absolute 即可。但是，在这种情况下，您会发现它们不能成为父子关系。 - sdabrutas

以工具提示为例。工具提示必须覆盖网页中的任何元素，而不管这些元素的z-index是多少，对吧？为此，您必须将其放置在代码中可以获得更高堆叠索引的位置。但是，将其放置在代码的那部分中，您无法使用“相对绝对”定位，但仍应在其应有的父级旁边或相对于其显示它。这就是我正在尝试做的事情。 - sdabrutas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pons Purushothaman · Accepted Answer

我认为这不可能仅通过CSS实现。但是，通过一些脚本，我们可以实现这个目标。获取所谓父元素的offset-left和top，并将其应用于所谓子元素。子元素应该是绝对定位的元素。请查看下面的示例，希望这对您有用。

即使所谓的子元素（黄色框）独立于所谓的父元素，它始终与所谓的父元素的左上角对齐。

function offsetCalculate(){
    var parentTop = $('#supposed-parent').offset();
    var parentLeft = $('#supposed-parent').offset();
    $('#supposed-child').css({
        'top':parentTop.top,
        'left': parentLeft.left
    });
}
$(document).ready(function () {
    offsetCalculate();
});
$(window).resize(function(){
    offsetCalculate();
});

#supposed-child{
    position: absolute;
    background: yellow;
    border-radius: 5px;
    padding: 10px;
    z-index: 999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui.</h1>
    <div id="supposed-parent">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui. Pellentesque eget commodo tellus. Curabitur a dolor est. Integer dapibus lectus nec mi luctus, ac ornare ex auctor. Donec vel nisi nulla. Mauris maximus egestas nunc ut egestas. Suspendisse id leo nec elit consectetur interdum. Ut purus nibh, tristique quis est vel, ultrices blandit nibh. Aenean nibh justo, mattis sed vulputate quis, efficitur eu mauris. Sed vel vulputate metus, et dictum arcu. In ornare nisl vitae purus elementum, quis egestas dolor volutpat. In velit nisi, posuere in urna non, feugiat luctus enim.
    </div>

</div>
<div id="dialog-container">
    <div id="supposed-child" >This is a popup</div>
</div>