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!
Related
I'm working on a static site that has a side nav on some pages and the nav is meant to stick to the bottom of the screen while scrolling. How can I get the nav to stop sticking at the bottom of the parent container? The nav should stay inside the parent.
Right now it continues to stick even after the container is out of view and eventually overlaps the footer.
Here's the demo site:
https://blissful-kare-3ae082.netlify.app/checklist.html
Your element has the attribute "fixed-bottom" as one of its classes. This will affix the y-axis placement of your navigational element to the bottom of the screen, not to the bottom of the parent container.
There are a couple of things you can do to clean this up. If you just want it not to overlap, you can add padding to the bottom of your element; I found that padding it with 100px worked cleanly as in the picture below.
You may also look to affix it to the actual parent container with usage of the "relative" tag, the solution of which is discussed in various other posts on this site:
Fixed position but relative to container
I am using responsive framework 1140px. In the mobile version I have to fix the position of a logo but not have it overlap the content on scroll. Basically fix the position but don't fix the image on scroll, can this be achieved?
You want to use position:absolute
position:fixed fixes the element to the screen, so it will not move when you scroll (it's fixed to the window).
position:absolute fixes the element based on the closest ancestor that is not position:static, so it will move when you scroll the page (it's fixed to the page).
It appears that you want is position: absolute, the difference being that absolute images do not move while scrolling.
http://www.impressivewebs.com/absolute-position-css/
It's worth taking a look at this link in order to see the differences between relative, absolute, and fixed positioning:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Honestly, before this problem I kinda thought that I actually knew something about css positioning, but it looks that I do not.
Here is what I have, I need to position the social buttons div on the left of the container and make it fixed so it does not move, but only until the bottom of that div is lined up with the bottom of the container in which it was positioned then it will need to scroll further. I do not know if I am explaining my self so that everyone can understand what I mean here so please take a look at the following example
The div with all facebook, twitter, G+ and print buttons is scrollable until it is aprox. 10px below the top of the browser, then it stops and continues to scroll only after the bottom of it is lined up with the container that it is placed in to.
Please help, I am kinda stack with it
This isn't a CSS question unless you're willing to make-do with position: sticky, which probably isn't what you're looking for. (Reading about it here)
If you're looking for a jQuery solution, then you could use ScrollFollow, where you can specify a container parent for the fixed-scrolling item.
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.