CODEWITHSUNDEEP
javascriptjqueryhtmlcss
number8pie
number8pie

Reputation: 147

Position:Absolute Not Respecting It's Elders

Ok, there's been no suggestions so far, so maybe haven't really summed it up properly;

If I absolutely position the section with the class="container" using an extra class or id only applied to that <div>, it positions itself outside it's relatively positioned ancestor the <div> with the class="band banner" when it should position itself within the "band banner" <div>.

I'm at a loss as to why, anyone got any ideas?

Here,s the test site again, http://test-site.zymichost.com

I'm developing a website using the skeleton boilerplate, and want to have a Flexslider slideshow background for a certain section, the band slideshow.

There are four main bands on the index page; header, slideshow, body and footer.

The only ones I've put in the example below is the slideshow banner, as you can see in the example there is the slideshow and the Latest News block, I need to have the Latest news block over the slideshow, but I need the slideshow to still be within the flow of the document because there are more elements similar to the Latest News elements below this slideshow banner that I don't want to overlap.

Here's my dilemma, if I absolutely position the Flexslider slideshow the Latest News element overlaps the slideshow, great, but so does the band below it (body) and its containing elements. Not great.

If I use absolute positioning on the Latest News section it stays outside the Slideshow banner (even if I set its containing element to position:relative;) something that has been confusing me, and if I use negative positioning (boooo hiss) it messes up when the browser re-sizes. Pants.

Here's the test site URL:

http://test-site.zymichost.com

I haven't included my code here because it would make the post a bit massive.

Like I said it only contains the slideshow banner, but I'll add more as required.

This might be something glaringly obvious but It's doing my head in, any help is appreciated.

Upvotes: 0

Views: 92

Answers (1)

Ilia G
Ilia G

Reputation: 10221

Absolutely positioned elements don't take up space within their parent element, which is why your section.container appears below div.band.banner, but it still flows as if it was relative. Give it actual position (presumably top and left) to have it show over top of your banner image. I am unclear what you mean by "band below body", but this is how it looks like on my end

enter image description here

Upvotes: 1

Related Questions