Relative position div interfering with absolute div

[LLLLLLL]

Check out http://mainlypiano.com/ and start typing in the search box ("dav" will get you several results).

 

Notice that the search box goes below the middle light purple box. There's no z-index here to cause an issue. If one removes the relative position of the light purple box, the search results menu shows in its entirety. That's weird, isn't it? (That messes up the "favorite albums" text there, which is the point of the relative position, but lets you see the error.)

 

Any idea why this is happening?

 

 

[requinix]

z-index is exactly the issue here. Or rather, using positioning in some places and not others is disrupting how elements are being stacked. Give the purple box a z-index:-1 as a test (that's not the solution) and you'll see it flow under the header too - something it doesn't do now, if you hadn't noticed.

Try reading this.

 

The best solution is some advice: don't use relative or absolute positioning nearly as much as you're doing now. A couple things should be, like the header (fixed) and search results list (absolute with relative parent), but everything else I see on that page can be done with plain DIVs and either some column techniques (eg, inline-block) or a bit of floating.

[LLLLLLL]

I'm not sure why you emphasize nearly, as if there is a lot of positioning on the page. There isn't. The relative div was added for the purposes of the text in the upper-right of that purple box (favorites of 2016), but that's the only positioning on the page.

 

I can rework how that text gets to that spot... but my question still isn't answered. Any z-index added to the search results doesn't make it appear above the relative-positioned purple box. So the answer still isn't clear.

[requinix]

I'm not sure why you emphasize nearly, as if there is a lot of positioning on the page. There isn't. The relative div was added for the purposes of the text in the upper-right of that purple box (favorites of 2016), but that's the only positioning on the page.

I emphasized it because there's more absolute and relative positioning used than I would expect to see on that page, given what elements are present. Like I said, the header and search results "should" be positioned, but I count 9 elements (mostly in the header) that are positioned - and I see you've changed it since I looked earlier.

 

but my question still isn't answered. Any z-index added to the search results doesn't make it appear above the relative-positioned purple box. So the answer still isn't clear.

Did you read that link I gave? It tries to explain how elements are layered on top of each other when it comes to z-indexes and relative/absolute positioning. Since you were doing the latter, the layering was not what you expected. True, you didn't specify z-index, but that's really an override and not an absolute value - without the browser calculates layering based on rules, and there are specific rules for what to do with positioned elements. Applying a z-index to the search results to try to bring it to the front isn't enough - the purple box was the problematic element so you had to add one to that to make it go to the back.

[LLLLLLL]

There are two items using positioning in the header.

 

We're done here.