I have some absolutely positioned elements:
span {
display: block;
}
span.sub {
color: blue;
position: absolute;
}<div>
<span>Coffee</span>
<span class="sub">Tea</span>
<span class="sub">Milk</span>
<span class="sub">Water</span>
</div>How can I prevent them from collapsing? I want them to flow freely over the elements under div, like a dropdown navigation menu. Can it be achieved without nesting the positioned elements inside an extra container?
One approach could be using white-space: pre; on parent div:
span {
display: block;
}
span.sub {
color: blue;
position: absolute;
}
/* --------------------- */
:root {
/* 1em is default font size */
--menu-bar-height: 1.3em;
}
body div {
width: 200px;
background-color: rgb(122, 213, 243);
height: var(--menu-bar-height);
white-space: pre;
}
span:first-child {
margin-top: -2em;
width: fit-content;
background-color: rgb(48, 171, 212);
}
span.sub {
margin-top: -2.4em;
}
/* cosmetic changes */
.sub:hover {
border: 2px dotted blue;
transform: translateX(10px);
}
.sub:nth-child(even) {
background-color: lawngreen;
}
.sub:nth-child(odd) {
background-color: tomato;
}
#second {
width: 200px;
height: 200px;
background-color: wheat;
text-align: center;
z-index: -1;
}<div>
<span>Coffee</span>
<span class="sub">Tea</span>
<span class="sub">Milk</span>
<span class="sub">Water</span>
<span class="sub">Chocolate</span>
</div>
<div id="second">Div 2</div>
Following is one more approach. Using white-space: pre; on span:before pseudo element and adding more lines using counter.
span {
display: block;
}
span.sub {
color: blue;
position: absolute;
}
/* --------------------- */
@counter-style nuLine {
system: symbolic;
symbols: "\a";
}
body div:first-child {
width: 200px;
counter-reset: lines;
background-color: lightblue;
flex-direction: column-reverse;
}
span.sub {
height: 0px;
margin-top: -1em;
background-color: transparent;
mix-blend-mode: multiply;
}
span.sub::before {
counter-increment: lines;
content: counter(lines, nuLine) counter(lines) ". ";
white-space: pre;
}
span.sub::after {
content: "\00a0";
width: 100%;
position: absolute;
left: 0px;
opacity: .5;
}
/* cosmetic changes */
span:first-child {
width: 200px;
}
.sub:hover {
transform: translateX(10px);
}
.sub:hover::after {
border: 2px dotted blue;
}
.sub:nth-child(even)::after {
background-color: lawngreen;
}
.sub:nth-child(odd)::after {
background-color: tomato;
}
#second {
width: 200px;
height: 200px;
background-color: wheat;
text-align: center;
padding: 0px;
margin: 0px;
}<div>
<span>Coffee</span>
<span class="sub">Tea</span>
<span class="sub">Milk</span>
<span class="sub">Water</span>
<span class="sub">Chocolate</span>
</div>
<div id="second">Div 2</div>First of all We need to understand something.
When we use position, we usually need: position:relative for the parent element and position:absolute for the child elements.
If we give to the children position:absolute without using position:relative in the parent, this children will be positioned taking the window as reference, soo they will be positioned in the left/top corner of the window, causing like this a collapse.
Second, when using position:absolute we also need to tell the child where do we want them using top, bottom, left, right you will se in my example.
if we dont use them, they will be positioned in the same spot, causing a collapse.
soo, once expalined this, here is my solution, in my opinion is not the best way to do a dropdown menu.
<div>
<span>Coffee</span>
<span class="sub">Tea</span>
<span class="sub">Milk</span>
<span class="sub">Water</span>
</div>
my HTML is the same as you wanted.
div{
position: relative;
}
span {
display: block;
}
span.sub {
color: blue;
position: absolute;
}
span.sub:nth-child(2){
left: 0;
top: 20px;
display: none;
}
span.sub:nth-child(3){
left: 0;
top: 40px;
display: none;
}
span.sub:nth-child(4){
left: 0;
top: 60px;
display: none;
}
span:first-child:hover ~ span{
display: block;
}
notice that I use left and top as I told before.
First of all we need the parent element, in this case the div to be position: relative because this is our reference.
our span which contains the Coffee word is positioned as it should.
then is quite simple, we need to target each span.sub because they need different values of position not to collapse, I´ve used pseudo-classes to target them, you can also use another class.
and to make a dropdown menu on hover I´ve donee with this line span:first-child:hover ~ span{display: block;} when hover on coffee the display of all span.sub will be changed to block to be able to see them.
You can also do this. Apply absolute positioning on the parent div. This will make the whole parent element be absolutely positioned above any kind of other content - like a dropdown menu as you mentioned - while the child span will flow normally inside this element.
div {
position:absolute;
}
span {
display: block;
}
span.sub {
color: blue;
}<div>
<span>Coffee</span>
<span class="sub">Tea</span>
<span class="sub">Milk</span>
<span class="sub">Water</span>
</div>