如何防止绝对定位的弹出窗口从其容器中裁剪出来？

如何解决如何防止绝对定位的弹出窗口从其容器中裁剪出来？

function myclick() {
  let node = document.createElement("div");
  node.className = "popover";
  node.innerText = "hello world hello world";
  event.srcElement.appendChild(node);
}

.container {
  width: 230px;
  height: 200px;
  border: 1px solid #ddd;
  display: flex;
  flex-flow: wrap;
}

.tag {
  border: 1px solid #ddd;
  padding: 5px;
  margin: 5px;
  display: flex;
  height: 20px;
  position: relative;
}

.popover {
  position: absolute;
  top: 30px;
  width: 60px;
  left: 0px;
  background-color: #dfdfdf;
}

<div class="container">
  <div class="tag" onclick="myclick();">apple</div>
  <div class="tag" onclick="myclick();">banana</div>
  <div class="tag" onclick="myclick();">carrot</div>
  <div class="tag" onclick="myclick();">dog</div>
  <div class="tag" onclick="myclick();">elephant</div>
  <div class="tag" onclick="myclick();">firetruck</div>
</div>

我已经完全复制了上面遇到的问题。基本上，当您单击标签时，我会从标签中看到弹出窗口。除了标签靠近容器边缘的情况以外，所有其他方法都可以正常工作。在这种情况下，标签会从容器中剪出。在提供的示例中，如果您单击“ dog”，则弹出框剪辑将位于container div之外。

相反，我希望弹出窗口尽可能向左移动，以防止其自身从容器中剪出。我已经把它弄乱了一段时间，但我不太想知道如何做到这一点。

解决方法

已编辑：您可以计算标签的正确位置并检查弹出窗口是否有足够的空间。将参数添加到myclick并传递元素。

var popUpWidth = 60;
var containerWidth = 200;
function myclick(element) {
  let node = document.createElement("div");

  if(element.offsetLeft + popUpWidth > containerWidth){
     node.style.left = -20 + "px";
  }

  node.className = "popover";
  node.innerText = "hello world hello world";
  event.srcElement.appendChild(node);
}

片段：

var popUpWidth = 60;
var containerWidth = 200;
function myclick(element) {
  let node = document.createElement("div");

  if(element.offsetLeft + popUpWidth > containerWidth){
     node.style.left = -20 + "px";
  }

  node.className = "popover";
  node.innerText = "hello world hello world";
  event.srcElement.appendChild(node);
}

.container {
  width: 230px;
  height: 200px;
  border: 1px solid #ddd;
  display: flex;
  flex-flow: wrap;
}

.tag {
  border: 1px solid #ddd;
  padding: 5px;
  margin: 5px;
  display: flex;
  height: 20px;
  position: relative;
}

.popover {
  position: absolute;
  top: 30px;
  width: 60px;
  left: 0px;
  background-color: #dfdfdf;
}

<div class="container">
  <div class="tag" onclick="myclick(this);">apple</div>
  <div class="tag" onclick="myclick(this);">banana</div>
  <div class="tag" onclick="myclick(this);">carrot</div>
  <div class="tag" onclick="myclick(this);">dog</div>
  <div class="tag" onclick="myclick(this);">elephant</div>
  <div class="tag" onclick="myclick(this);">firetruck</div>
</div>

,

您可以尝试一下。我添加了一个名为onEdge的javascript函数，用于检测子元素与边缘的距离。可能需要根据您的需要进行修改（例如，设置您认为“太靠近”的距离父母边缘的距离）。

function onEdge(child) {
  if (child.parentElement.offsetWidth < (child.offsetLeft + child.offsetWidth))
    return true;
  return false;
}

function myclick(elm) {
  var addClass = onEdge(elm);

  let node = document.createElement("div");
  node.className = "popover" + (addClass ? " right" : "");
  node.innerText = "hello world hello world";
  event.srcElement.appendChild(node);
}

.container {
  width: 230px;
  height: 200px;
  border: 1px solid #ddd;
  display: flex;
  flex-flow: wrap;
}

.tag {
  border: 1px solid #ddd;
  padding: 5px;
  margin: 5px;
  display: flex;
  height: 20px;
  position: relative;
}

.popover {
  position: absolute;
  top: 30px;
  width: 60px;
  left: 0px;
  background-color: #dfdfdf;
}

.popover.right {
  left: auto;
  right: 0;
}

<div id="tag-container" class="container">
  <div class="tag" onclick="myclick(this);">apple</div>
  <div class="tag" onclick="myclick(this);">banana</div>
  <div class="tag" onclick="myclick(this);">carrot</div>
  <div class="tag" onclick="myclick(this);">dog</div>
  <div class="tag" onclick="myclick(this);">elephant</div>
  <div class="tag" onclick="myclick(this);">firetruck</div>
</div>

,

只需稍微降低左侧位置：

.popover {
  position: absolute;
  top: 30px;
  width: 60px;
  left: -19px;
  background-color: #dfdfdf;
}