Jump to content


Photo

Relative position div interfering with absolute div

menu absolute z-index css relative

Best Answer LLLLLLL, 15 June 2017 - 02:21 PM

There are two items using positioning in the header.

 

We're done here.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 LLLLLLL

LLLLLLL
  • Members
  • PipPipPip
  • Advanced Member
  • 308 posts

Posted 14 June 2017 - 06:46 PM

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?

 

 



#2 requinix

requinix
  • Administrators
  • Lazy Administrator
  • 9,255 posts
  • LocationWA

Posted 14 June 2017 - 07:21 PM

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.
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#3 LLLLLLL

LLLLLLL
  • Members
  • PipPipPip
  • Advanced Member
  • 308 posts

Posted 14 June 2017 - 07:39 PM

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.



#4 requinix

requinix
  • Administrators
  • Lazy Administrator
  • 9,255 posts
  • LocationWA

Posted 15 June 2017 - 05:59 AM

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.
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#5 LLLLLLL

LLLLLLL
  • Members
  • PipPipPip
  • Advanced Member
  • 308 posts

Posted 15 June 2017 - 02:21 PM   Best Answer

There are two items using positioning in the header.

 

We're done here.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users