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?
The thing about absolute positioning is, it takes the elements out of the document flow.
Yes, by explicitly defining a position for each element with the top property.
Though making a wrapper that has absolute positioning and displaying the subs as ordinary blocks within it is probably better.
Yes it can be achieved but will require magic number fixes and non semantic html. Why the limitation on the html unless you are just playing around?
In Sam’s example above to you would need to add a top position to all the sub items in order to line them up under each other,. It may be simpler if you have more than a few items instead to just limit the height of the div and then all the elements below will overflow as though they were absolutely placed without actually needing to place them absolutely.