CSS将div添加到相对于父级放置的dom中，而没有其他内容跳转

如何解决CSS将div添加到相对于父级放置的dom中，而没有其他内容跳转

我正尝试在我的网络应用中弹出一个简短的窗口，提示用户单击代码进行复制。我遇到的麻烦是试图弄清楚它不会偏移父div中的所有内容。

下面的gif图片是我经过所有尝试并尝试解决该问题后所发生的事情。我想要实现的是使复制的消息气泡仅显示在带有房间代码的范围的右上方。

这个小提琴是互动的精简版本。我已经尝试了所有不同的显示和位置，但我不确定从这里到哪里。预先感谢大家。

.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>

解决方法

使用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;
}

在position: absolute;上添加.pop-up将防止容器为您要防止的元素留出任何空间。此外，将position: relative;添加到.container将使您可以自由地将.pop-up放置在相对于容器的任何位置。

另一种解决方案是将display: none; display: inline;替换为visibility: visible; visibility: hidden;。两者之间的主要区别是display将从布局中删除整个元素，而visibility仅隐藏元素而保留元素空间。这样可以解决调整容器大小的问题，但是不会像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将div添加到相对于父级放置的dom中，而没有其他内容跳转

解决方法

相关推荐