Jump to content

Relative position div interfering with absolute div


LLLLLLL
 Share

Go to solution Solved by LLLLLLL,

Recommended Posts

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?

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.