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;
}
question from:
https://stackoverflow.com/questions/65829232/make-div-position-fixed-depending-of-its-height-using-css 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…