make div position fixed depending of its height using css

Question

Good day.

Please consider next simple code:

                <div className="box-and-clock">
                    
                        {isBoxShown && (
                            <div className="box">
                                {value}
                            </div>
                        )}
                        
                        <img
                            onMouseOver={() => setIsBoxShown(true)}
                            onMouseOut={() => setIsBoxShown(false)}
                            src={clockIcon}/>
                </div>

So I've got following layout (I've cut some redundant data)

When user points at the clock icon he sees some data. The problem is when there is more data in the black box the arrow (which is done by pseudoelements) doesn't point to clock icon anymore. Something like this

I need to make that blackbox to be on certain position from the clock icon without depending on its height.

I've tried display: table to the parent div and display: table-cell to the child, but with no luck. any advices?

My css

.box {
    width: 200px;
    min-height: 130px;
    height: auto;
    background: black;
    border-radius: 2px;
    position: absolute;
    top: 320px;
    right: 228px;
}

.box-and-clock {
display: flex;
flex-direction: column;
}

Answer 1

you can set parent element with css position: relative; to let children identity its position, so children element can use position: absolute; to place itself relative to its parent's position.

.box {
  width: 200px;
  min-height: 130px;
  /* height: auto; */
  background: black;
  border-radius: 2px;
  /* top: 320px; */
  /* right: 228px; */

  position: absolute;
  top: 0px;
  transform: translateY(-100%); /* offset element */
}

.box-and-clock {
  display: flex;
  flex-direction: column;

  position: relative; /* you need this! */
}

ps, for more detailed concept of css position, you may keyword search: css position property