I am making an attempt to design an html/css doc displaying an inventory of things in a single div with content material in a separate div to the correct of that listing. Every listing merchandise features a hidden description that may be revealed, for instance, when a consumer hovers over a sure “extra information” field. Nevertheless, I would like that hidden description to be displayed vertically adjoining to its merchandise within the listing and to the correct of the listing div (thus floating above the content material to the correct of the listing div).
To make clear my intent, I’ve created the next instance. Every merchandise within the listing has a div styled to indicate a hidden info field when the cursor hovers over the div.
Nevertheless, the default placement of the data field will not be the place I would like it (see notice within the demo), and even when it have been, it does not observe its merchandise when scrolled.
I do know I can set a father or mother of the floating-more-info-box div to “show: relative” to manage the place of the floating-more-info-box div, however then will probably be positioned inside the content material of it is father or mother and never float on prime of the adjoining grey content material.
<type>
.empty-but-cannot-get-code-snipit-to-work-without-this {
}
.outer-container {
show: flex;
flex-direction: row;
}
.list-column {
width: 11rem;
top: 10rem;
background-color: white;
overflow: auto;
place: relaive;
border: 3px strong inexperienced;
}
.placeholder {
top: 10rem;
}
.placeholder.left {
width: 5rem;
background-color: palegoldenrod;
border: 3px strong goldenrod;
}
.placeholder.proper {
width: 20rem;
background-color: grey;
border: 3px strong darkslategray;
}
.merchandise {
top: auto;
padding: 0.4rem;
border-width: 1px 0 1px 0;
border-color: inexperienced;
border-style: strong;
}
.hover-activator {
border-radius: 2rem;
border: 2px strong ;
padding: 0 0.5rem 0 0.5rem;
width: fit-content;
cursor: pointer;
}
.floating-more-info-box {
show: none;
place: absolute;
background-color: yellow;
padding: 0.5rem;
}
.merchandise:hover .floating-more-info-box {
show: flex;
}
</type><div class="outer-container">
<div class="placeholder left"></div>
<div class="list-column">
<div class="merchandise">
<label>title: Merchandise 1</label>
<div class="hover-activator">
Hover for more information
<div class="floating-more-info-box">
I would like this aligned vertically with Merchandise 1 however hovering to its proper (floating on prime of the grey placeholder) even when scrolled
</div>
</div>
</div>
<div class="merchandise">
<label>title: Merchandise 2</label>
<div class="hover-activator">
Hover for more information
<div class="floating-more-info-box">
I would like this aligned vertically with Merchandise 2 however hovering to its proper (floating on prime of the grey placeholder) even when scrolled
</div>
</div>
</div>
<div class="merchandise">
<label>title: Merchandise 3</label>
<div class="hover-activator">
Hover for more information
<div class="floating-more-info-box">
I would like this aligned vertically with Merchandise 3 however hovering to its proper (floating on prime of the grey placeholder) even when scrolled
</div>
</div>
</div>
<div class="merchandise">
<label>title: Merchandise 4</label>
<div class="hover-activator">
Hover for more information
<div class="floating-more-info-box">
I would like this aligned vertically with Merchandise 4 however hovering to its proper (floating on prime of the grey placeholder) even when scrolled
</div>
</div>
</div>
<div class="merchandise">
<label>title: Merchandise 5</label>
<div class="hover-activator">
Hover for more information
<div class="floating-more-info-box">
I would like this aligned vertically with Merchandise 5 however hovering to its proper (floating on prime of the grey placeholder) even when scrolled
</div>
</div>
</div>
</div>
<div class="placeholder proper"></div>
</div>Is there a pure html/css resolution to this drawback or will I’ve to resort to scripting?
