I have sidebar on the left hand side of my webpage that is set to postion:relative with a top value set but it also has a z-index of 10 as the top part of the sidebar needs to overlap a portion of the content at the right that is also set to relative.
I then have my footer with no position set, but has a clear:both set, that sits underneath the sidebar, as the height of the sidebar is larger the my content div.
My question is, as the sidebar grows, it doesn't push the footer down with it but rather is rendered over the top of it - any ideas what I am missing?
Is it because my sidebar has a z-index of 10 - if so, how would I get it to push the footer down instead of rendering over the top of it?
If not, then what could it be?
Mmh z-index, positioned elements and stacking context are so fun :(
Here are good resources about z-index:
Teach yourself how elements stack (renamed in How z-index works!)
Understanding CSS z-index (MDC)
The first one will let you find the solution by yourself, even if it's by trial and error.
Not sure if this would work, but what happens if you set the same z-index for the sidebar and the footer?
Kill the top declaration for your #sidebar and figure out a different way of having that top space ( margin, padding )
If that doesn't work, please link us to code.
Related
I have two divs on different z-layers. The sidebar div (in red) on the left and the main div on the right. Both have a 2 divs embedded.
The (red-background-colored) sidebar div stops as intended at 50% of the page. However, I fail to hide the overflow [SHOULD NOT BE SEEN. BUT IS VISIBLE.] of this div. Thus it overlays the main div's second inner div [BLOCK RIGHT].
Here is the dilemma, seen in the right hand side with the white background.
http://jsfiddle.net/brazim/v6rk1b4q/39/
Motivation for this layout: With Javascript the user will be able to display either the full content of the sidebar or the main content by dragging the right-hand-side edge of the sidebar div to the left or right.
I can handle the javascript, only the correct overflow is missing.
Thanks for any hints in JsFiddle.
Elements with position: fixed do not relate to its parent container, but to the viewport, so it is not affected by the overflow setting. You should use absolute positioning for that, or, if you need to fix it (consider that, in the case of the sidebar, it is already fixed by its parent) use an alternative solution like display: none
Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Fixed_positioning
When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?
Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.
IMAGE: http://go-dl.eve-files.com/media/1310/image.png
I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.
There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.
Here is my code:
PASTEBIN: http://pastebin.com/xbvPEfjA
I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!
in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.
I'm creating a site where I have a a logo on the page that is static positioned as normal. However I have a jQuery plugin that converts it to a fixed positioned element as it hits the top of the screen when you scroll so that it sticks in place on top of a fixed position navigation bar. The problem I have is that while the logo is still static as it hasn't hit the top yet but is overlapping the navigation bar, it appears underneath the navigation bar.I have used the z-index on the logo to try and place it on top but I'm finding that this doesn't make a difference when used across static and fixed positioned elements at the same time.
Does anyone have a solution?
Edit: I thought I should mention that I have thought of a solution myself, to have the logo always fixed positioned and to adjust its position with javascript but I would like to fix this in CSS if possible.
Just add position: relative; to the styling for #logo. z-index only works on positioned elements. Tested it in jsFiddle and it seems to work.
Happy coding!
I'm experimenting with jquery.scrolling-parallax.js for parallax backgrounds.
The background elements has z-index 333.
On all elements on the site i can make the backround be behind or in front of the elements by using z-indexes below or over this.
But i have problems with my header.
I have a header with fixed position and z-index 232 to have the backgrounds be seen over it.
However, in the header div i have two other divs containing logo and menu. These are position:relative and have z-index:999 since i dont want the background to be on top of them. But this does not work!
If i switch the whole header div to z-index over 333 it works fine, the background appears behind it. But i only want it to go behind those child divs!
Appreciate your help
If I understand your problem correctly, I think the problem is that your logo and menu should not be using position:relative. Try either using a different type of positioning or placing their div outside of the header div.
By using relative the child is probably taking the header divs z-index.
The current html and css is a bit messy being that the site is still in early beta and is being developed, but this menu will be used.
http://beta.defiant-guild.net
I have the header and slider both absolutely positioned within a relatively positioned container div. The order of the z-index stack I need from back to front is:
header
slider
menu
slider image
menu drop down list
I am open to any ideas to make this simpler or for a fix to this. Thanks for your time.
What is your problem? Just give them appropriate z-indeces. The higher the value, the further up in the stack it will be. However, it only works on absolute or relative positioned elements. If the css is applied to the drop down menus, and whatever else has an absolute or relative position, all should be fine.