So far, no suggestions have been made, indicating that maybe I haven't properly summarized the issue;
The problem arises when I absolutely position the section with the class="container" using an additional class or id specific to that <div>. Instead of positioning itself within its relatively positioned ancestor, which is the <div> with the class="band banner", it ends up outside of it.
I'm puzzled as to why this is happening, does anyone have any ideas?
You can view the test site here:
Currently, I am working on a website using the skeleton boilerplate and aiming to have a Flexslider slideshow background for a specific section known as the band slideshow.
The index page features four main bands: header, slideshow, body, and footer.
In the example provided below, only the slideshow banner has been included. As seen in the example, there's the slideshow along with the Latest News block. My goal is to place the Latest news block on top of the slideshow while ensuring that the slideshow remains within the document flow to avoid overlapping with other elements similar to the Latest News block further down the page.
My dilemma lies in the fact that if I use absolute positioning for the Flexslider slideshow, the Latest News element overlaps with the slideshow, but so do the elements of the band below (body) and its parent elements, which is not ideal.
On the other hand, if I resort to absolute positioning for the Latest News section, it remains outside the Slideshow banner even when I set its containing element to position:relative;, causing confusion. And negative positioning is not a desirable solution either as it causes issues when the browser is resized.
You can access the test site URL here:
I have refrained from including my code here to prevent making the post excessively long. Currently, it only pertains to the slideshow banner, but more code will be added as needed.
This might be a glaringly obvious issue, but it's truly baffling me. Any assistance would be greatly appreciated.