I have one div with position:fixed 0; that stays on the top of the browser window even when I scroll down.
The problem is the adsense banners (iframes) that are out of the fixed div (thus in the main site's content div that should appear under), when I scroll down, they go OVER the fixed div and not below it.
I tried to apply a clear: both and z-index to both elements but nothing changed.
Can't iframe not go below fixed elements?
thank you
You need to have proper positioning for z-index to work. Makes sure the iframe container is position:relative or position:absolute
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 trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.
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 have placed an AP Div on my page that holds an iframe. I used position: relative so that the AP Div would not move with the image behind it. Once I added the AP Div with the css property Position: Relative it stays exactly where I want it , however it pushed the image further down. i need the main image to be aligned to top. If you look at the other pages you will see how they are all aligned at top. Is there a solution for this? I am not a css expert so I would be very appreciative of any help given. thanks!
my link is:
http://www.mylittleovertures.com/continue.html
thanks!
The basic problem is that div and iframe are block elements on the same level. Setting the iframe positioning to relative doesn't help. Instead, you should wrap image and iframe into a container DIV, set this DIV to position:relative and then absolutely position the iframe on that DIV. You could even drop the extra img tag and set the image as the background of the container DIV. You could also get of the <center> by setting the container DIV's margin to 0 auto
Here's an example: http://jsfiddle.net/99wCg/3/
i have a problem with a stuck down footer not been pushed down by 2x DIVs in the main content area.
www.superwideprint.com/swp2
for some reason the 2 content containers arnt pushing the footer down when the screen resolution is low, i have added a clear:both div above the footer but to no avail.
can anyone help me please.
style sheet and main page can be seen from the link above. been at this for hours now.
The footer's position is set to absolute, so the content div is not going to affect it. Setting the position to relative will not help either, as this means your bottom: 0 code will push it to the bottom of whatever it is in, not the page.
What you're after is a sticky footer, try this http://www.cssstickyfooter.com/ or http://ryanfait.com/sticky-footer/
The reason is the #footer DIV is position:absolute. So, remove position:absolute form your footer.
A part from that your want your footer always stay at bottom then you can use Sticky Footer technique. Check this http://ryanfait.com/sticky-footer/