相对于另一个不是其父元素的元素定位一个元素答案

【问题标题】：Position an element relative to another that is not its parent相对于另一个不是其父元素的元素定位一个元素
【发布时间】：2019-04-17 02:28:32
【问题描述】：

考虑到对话框、模式、工具提示等组件的堆叠索引应该高于 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 旁边或旁边？任何帮助将不胜感激。

【问题讨论】：

你可以只使用css。 w3schools.com/css/css_positioning.asp 在您的示例中将容器 position: relative 设置为 <body> 或在实际示例中可能是另一个 div，然后两个 <div>s 是 position: absolute 并具有您想要的定位。或者您可以使用 css 网格并将其父母移动到您想要的位置css-tricks.com/snippets/css/complete-guide-grid
我反应流利，但不明白你的意思。这也可能是一个纯 CSS 问题。不知道你想达到什么目的，请举个例子。
通常，要相对于另一个组件定位一个元素，您只需将该元素作为另一个组件的子元素，然后将position: relative 和position: absolute 放在这些元素的样式中。但是，在这种情况下，您可以看到他们不能是父母和孩子。
以工具提示为例。无论这些元素的 z 索引如何，工具提示都必须覆盖到网页中的任何元素，对吗？为此，您必须将其放在代码中可以获得更高堆叠索引的位置。但是，把它放在代码的那部分，你不能使用“相对绝对”定位，但你仍然应该将它显示在它假定的父级旁边或相对于它的父级。这就是我想要做的。

标签： javascript html css reactjs

【解决方案1】：

我认为这对于纯 CSS 是不可能的。但是通过一个小脚本，我们可以实现这一点。获取假定父级的左偏移和顶部，并将其应用于假定的子级。子元素应该是绝对定位元素。检查以下示例，希望这对您有用。

即使假定子项（黄色框）独立于假定父项，它也始终与假定父项的左上角对齐。

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>

【讨论】：

这个解决方案+1。我明白了，我很感激。我从来没有想过这一点，但我认为它真的会起作用，因为我熟悉使用 JS 获取元素的位置。寿，我将使用parentElem.getBoundingClientRec() 而不是。此外，我正在开发一个 React 项目，并且在 React 中使用 jQuery 是一个很大的问题。不过，谢谢。
欢迎@SandyBrutas