can I calculate the value of CSS property of a dynamically changing div and use to calc() the value for positioning a sibling div in CSS?

Question

So this is what I am trying to do. There is an element/div which has some sibling div related to it like a modal. I know the size of the element div and have manually adjusted the transform property of the modal to be close to element but not overlapping and within the screen using the translate() function. What I intend to do.

1. calculate the size of the elementbox and modal and calculate the transform parameters for the modal dynamically. I need to be able to pass the height and width property values of the elementbox to the modal class to fulfill that. 2)determine the position of the element box in the viewport (I have thought to divide viewport into four quadrants). Decide the direction of transformation of modal on the basis of it.

{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

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.

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

Simply, no. CSS alone will not be able to determine the position of an element in order to style an element. You will indeed need a dynamic solution using JS for this.

It sounds like you are writing your own tooltip library for your application. If this is the case, I recommend considering third-party solutions for this as they already have done much of the heavy lifting an often already address accessibility needs. Some I found, though have not used myself:

• Tippy.js
• Popper.js
• or if you're already using a UI toolkit, check if it is already built in. For example, Bootstrap already uses popper.js for this.

If you are determined to write your own JS for this you are correct in that you will need a resize event listener. Be sure to use a debounce function for this so you don't encounter performance problems.