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/
Related
http://jsfiddle.net/ad8dQ/13/
This is the URL.
As you can see, it works in Firefox but not in Chrome.
If I add translate3d(0,0,0) to a fixed element, then I can easily make an element overlap it. (For example, that red-colored div is happily going over the fixed div.) However, if that element contains another element with fixed background-image, then the image disappears in Chrome.
(Please see firefox for how it should work.)
Let me add that if I don't have attachment as fixed of the background image, then the issue disappears, but I do need fixed background image.
I am working on a BuddyPress theme where there will be some images floating right on the padder div using add_action="bp_before_blog_post". On Linux/Firefox everything works as expected. The transform expands out and overlaps the sidebar div.
On Chrome and Safari the image expands to the sidebar div but then is hidden. I have tripple checked BP-Default theme and there isn't a css overflow: hidden value for the sidebar, or padder div. I have checked every line of bp-default.css, and used Chrome Web Developer and Firebug to check the live css.
I can't try a position:absolute as it needs to float on the right of the blog post. I setup a jsfiddle to try to show the behavior except that unless I created a div with overflow:hidden I couldn't replicate it. When you hover over the bottom image on the right you can clearly see the clipping. I found a public site with the BP-Default theme here, if you need to take a look at the css.
Since the container div does have overflow: hidden I am wondering if it is being inherited. If that's the case the theme doesn't work properly when I do overflow: transparent or remove it entirely.
Can you find where/why the image is clipped on sidebar div edge?
Is there a way to bust out using z-index or some other CSS method?
Is this a bug on Chrome/Safari to clip at the div edge or maybe a bug in Firefox 23 Linux that it doesn't?
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?
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.
you can see here http://jsfiddle.net/TKb6M/1/
overflow hidden does not work with position fixed relative or absolute. is this new? because i think i remember using thins in chrome and safari before and it worked fine.
The results are only visible when the child element is larger than the parent element overflow:hidden is applied to (or when the child element's position falls partially outside of the boundaries of the parent element).
So in your example you're not seeing any difference because the child img and the parent #he both have the same width (70px).
Take a look at this update (the width of #he is changes to 30px): http://jsfiddle.net/TKb6M/10/