CSS 添加 div 到 dom 相对于父级的定位，没有其他内容跳转

Question

我正在尝试在我的网络应用程序中制作一个简短的弹出窗口，以便在用户单击代码进行复制时显示。我遇到的麻烦是试图弄清楚它不会改变父 div.

中的所有内容

下面的 gif 是在我尝试解决此问题的所有尝试和谷歌搜索之后当前发生的情况。我想要实现的是让复制的消息气泡出现在带有房间代码的跨度的右上角。

此 fiddle 是交互的精简版。我已经尝试了所有不同的显示和定位，但我不确定从这里到哪里去。在此先感谢大家。

.container {
  background-color: #008afa;
  width: fit-content;
  margin: auto;
  padding: 20px
}

.text {
  display: inline;
}

.pop-up {
  display: none;
  background-color: #fe0c0d;
}

#show-hide {
  display: block;
  margin: auto;
}

<body>
  <script>
    $(document).ready(function() {

      var x = false;
      $('#show-hide').on('click', function() {
        if (!x) {
          $("#pop-up").css({
            "backgroundColor": "#fe0c0d",
            "display": "inline"
          });
          x = true;
        } else {
          $("#pop-up").hide();
          x = false;
        }
      });


    });

  </script>
  <div class='container'>
    <p class='text'>
      Hello there! <span>Here is a span.</span>
    </p>
    <div id='pop-up' class='pop-up'>
      Here is a pop-up
    </div>
    <button id='show-hide'>
      Click for pop up
    </button>
  </div>
</body>

Answer 1

使用position:relative和postion:absolute。

.container {
    background-color: #008afa;
    width: fit-content;
    margin: auto;
    padding: 20px;
    position: relative;
}
.pop-up {
    display: none;
    background-color: #fe0c0d;
    position: absolute;
    left:100%;
    width:inherit;
}

Answer 2

将 position: absolute; 添加到 .pop-up 将阻止容器为您试图阻止的元素生成任何 space。此外，将 position: relative; 添加到 .container 将使您可以自由地将 .pop-up 放置在相对于容器的任何位置。

另一个解决方案是将 display: none; display: inline; 替换为 visibility: visible; visibility: hidden;。这两者之间的主要区别在于 display 将从布局中删除整个元素，而 visibility 只会隐藏元素但保留元素 space。这将解决调整容器大小的问题，但不会为您提供 position: absolute 所具有的堆叠和定位优势。

.container {
  position: relative;
  background-color: #008afa;
  width: fit-content;
  margin: auto;
  padding: 20px
}

.pop-up {
  position: absolute;
  display: none;
  background-color: #fe0c0d;
}

CSS 添加 div 到 dom 相对于父级的定位，没有其他内容跳转

CSS add div to dom positioned relative to parent without other content jumping

html

javascript

css

position

display