我可以计算动态变化的 div 的 CSS 属性 的值，并使用 calc() 将同级 div 定位在 CSS 中的值吗？

Question

这就是我想要做的。有一个 element/div 有一些兄弟 div 像模态一样与之相关。我知道元素 div 的大小，并使用 translate() 函数手动调整模态的变换 属性 以接近元素但不重叠并在屏幕内。我打算做什么。

1. 计算元素框和模态的大小并动态计算模态的变换参数。我需要能够将元素框的高度和宽度 属性 值传递给模态 class 来实现它。 2）确定元素框在视口中的位置（我想过divide视口分成四个象限）。 Decide模态在其基础上的变换方向

{elementbox quadrant : modal transform direction}
1st Q: bottom right,
2nd Q: bottom left,
3rd Q: top left,
4th Q: top right,

@import url(<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">);
.eventbox{
  font-family: 'Roboto', sans-serif;
  background-color: #22efef;
  position: relative;
  margin-left: 190px;
  margin-top: 50px;
  width: 20%; 
  height: 15%;
  padding: 20px;
  border: 1px solid #333;
}
.modal {
    position: element(#elementId);
      background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  width: 35%;
    transform: translate(100%,2%);
  padding: 3px;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

<div id="elementId" class="eventbox">
  <h1>This is an element</h1>
  <p>some more content on the text which may  dynamically change the size-->Lorem ipsum dolor sit amet, consectetur adipiscing elit... ..ipsum id pulvinar.
</p>

</div>
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <p>This is the modal for the respective element.. which is also dynamically sized.Should dynamically position close to element without overlapping on element and without hiding beyond viewport</p>
  </div>

</div>

Codepen link

注意： Javascript 解决方案是受欢迎的，但我需要知道这是否仅通过 CSS 可以实现？ Javascript 的缺点是如果用户调整 window 的大小，在这种情况下我需要另一个事件监听器。

.eventbox{
  font-family: 'Roboto', sans-serif;
  background-color: #22efef;
  position: relative;
  margin-left: 1090px;
  margin-top: 50px;
  width: 20%;
  height: 15%;
  padding: 20px;
  border: 1px solid #333;
}
.modal {
    position: element(#elementId);
      background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  width: 35%;
    transform: translate(100%, 2%);
  padding: 3px;
}

.eventbox{
  font-family: 'Roboto', sans-serif;
  background-color: #22efef;
  position: relative;
  margin-left: 1090px;
  margin-top: 250px;
  width: 20%;
  height: 15%;
  padding: 20px;
  border: 1px solid #333;
}
.modal {
    position: element(#elementId);
      background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  width: 35%;
    transform: translate(105%, -225%);
  padding: 3px;
}

.eventbox{
  font-family: 'Roboto', sans-serif;
  background-color: #22efef;
  position: relative;
  margin-left: 190px;
  margin-top: 250px;
  width: 20%;
  height: 15%;
  padding: 20px;
  border: 1px solid #333;
}
.modal {
    position: element(#elementId);
      background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  width: 35%;
    transform: translate(100%, -225%);
  padding: 3px;
}

Answer 1

Note: Javascript solutions are welcome but I need to know if this is achievable by CSS only? Also the con of Javascript is if user resizes the window in this case I need another eventlistener for this.

简单地说，没有。 CSS 无法单独确定元素的位置来设置元素的样式。为此，您确实需要一个使用 JS 的动态解决方案。

听起来您正在为您的应用程序编写自己的工具提示库。如果是这种情况，我建议为此考虑第三方解决方案，因为他们已经做了很多繁重的工作，而且通常已经解决了可访问性需求。有些是我发现的，虽然我自己没有用过：

• Tippy.js
• Popper.js
• 或者如果您已经在使用 UI 工具包，请检查它是否已经内置。例如，Bootstrap 已经为此使用了 popper.js。

如果您决定为此编写自己的 JS，那么您是正确的，因为您将需要一个调整大小事件侦听器。为此请务必use a debounce function，以免遇到性能问题。