For some reason, if I load an html page that has position:fixed on something, but I load it in an iframe, the fixed positions to not seem to render as fixed, but look more like absolute positioning.
I'm not expecting the fixed divs to be fixed relative to the parent document. I would just think that they would be fixed in the iframe. Is this not possible in an iframe?
Chrome has a bug that doesn't fix elements with position:fixed if:
a) you use CSS3 transform in any element, and/or
b) you have a child element positioned outside the box of it's parent element
Oddly enough, the bug was reported back in 2009 and it's still open: https://code.google.com/p/chromium/issues/detail?id=20574
They seem to be fixed to the iframe based off this fiddle: http://jsfiddle.net/ww9mK/6/ (note: jsfiddle uses an iframe and my height's and width's were just to test scrolling).
Here is similar question fixed vertical positioning of css within an iframe
It looks like there is no problem with position fixed to be fixed to the iframe. Example: http://digitaldreamer.net/media/examples/iframe-site.html
Can you provide code you are working on?
Related
So, I tried doing position:absolute, but whenever I place something new, (eg a div) the other div gets pushed down.
Eg. without other div
Box
With other div
other div
box
Thanks :D
Are you sure the CSS rule is not ovewritten? (Check this with a browser code inspector, such as Firefox's Firebug or Opera's Dragonfly)
Additionally, If you want the div to be put on a place despite srolling,
use
position: fixed
instead. This will keep your object on a fixed place in the page.
You can usually use position:fixed or position:absolute.
If you want the element to be stuck on the screen no matter how to scroll, you can use position:fixed. Make sure that your top & left or bottom & right are set appropriately. Also make sure that the z-index is set appropriately, so no other element is covering it.
position:absolute; DOES depend on the parents of that element. If a parent of that element is positioned, then the absolute positioning will position the element within that element.
do you have examples of your code?
I have a full width video background running on a page, its container is absolutely positioned (and needs to be) and this seems to be breaking a fixed position element (an aside) elsewhere on the page.
When I remove the absolute positioning of the video container the aside is fixed as normal. Otherwise the fixed positioning doesn't work.
Here is the page with relevant elements isolated: http://xnthony.com/html/video_fixed.html
I've tested this in Chrome, Safari and Firefox.
Try this, i had no position problems with this plugin: http://dfcb.github.io/BigVideo.js/
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
I have a website with an image that is absolutely positioned in the header. It looks like it's working everywhere but IE6/7. My image is positioned absolutely within a header that has relative positioning. The image continues to push down the height of the header.
/*div*/
#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
/*image*/
#bod{position:absolute;top:0px;left:-95px;}
I tried to change to a fixed height but that screwed up the cart item on the right hand side.
The website is greatcaesars.com.
If anyone has a suggestion on what I might do to fix this, I'd appreciate it.
In older versions of IE, height is treated a lot like min-height, and min-height doesn't work at all.
Try this:
#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
#header{height: 140px;}
html > body #header{height: auto;}
The use of > to indicate immediate children, isn't recognised by older versions of IE.