I don't know if there is an issue, but I was wondering why the overflow:hidden
does not function on fixed
parent/children element.
Here's an example:
CSS and HTML:
.parent{_x000D_
position:fixed;_x000D_
overflow:hidden;_x000D_
width:300px;_x000D_
height:300px;_x000D_
background:#555;_x000D_
}_x000D_
.children{_x000D_
position:fixed;_x000D_
top:200px;_x000D_
left:200px;_x000D_
width:150px;_x000D_
height:150px;_x000D_
background:#333;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div class="children">_x000D_
</div>_x000D_
</div>
_x000D_
Live demo: jsFiddle
You could consider using CSS clip: rect(top, right, bottom, left);
to clip a fixed positioned element to a parent. See demo at http://jsfiddle.net/lmeurs/jf3t0fmf/.
Beware, use with care!
Though the clip style is widely supported, main disadvantages are that:
auto
value equals 100%
, ie. clip: rect(auto, auto, auto, auto);
;See http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ for more info.
EDIT: Chrome seems to handle positioning of and CSS3 transforms on child elements a lot better when applying backface-visibility, so just to be sure we added:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
to the main child element.
Also note that it's not fully supported by older / mobile browsers or it might take some extra effort. See our implementation for the menu at bellafuchsia.com.
EDIT 2014-11-02: Demo URL has been updated.
Fixed position elements are positioned relative to the browser window, so the parent element is basically irrelevant.
To get the effect you want, where the overflow
on the parent clips the child, use position: absolute
instead: http://jsfiddle.net/DBHUv/1/
2016 update:
You can create a new stacking context, as seen on Coderwall:
<div style="transform: translate3d(0,0,0);overflow:hidden">
<img style="position:fixed; ..." />
</div>
Which refers to http://dev.w3.org/csswg/css-transforms/#transform-rendering
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
I had a similar, quite complex problem with a fluid layout, where the right column had a fixed width and the left one had a flexible width. My fixed container should have the same width as the flexible column. Here is my solution:
HTML
<div id="wrapper">
<div id="col1">
<div id="fixed-outer">
<div id="fixed-inner">inner</div>
</div>
COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div id="col2">COL2</div>
</div>
CSS
#wrapper {
padding-left: 20px;
}
#col1 {
background-color: grey;
float: left;
margin-right: -200px; /* #col2 width */
width: 100%;
}
#col2 {
background-color: #ddd;
float: left;
height: 400px;
width: 200px;
}
#fixed-outer {
background: yellow;
border-right: 2px solid red;
height: 30px;
margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */
overflow: hidden;
padding-right: 200px; /* #col2 width */
position: fixed;
width: 100%;
}
#fixed-inner {
background: orange;
border-left: 2px solid blue;
border-top: 2px solid blue;
height: 30px;
margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */
position: absolute;
width: 100%;
}
Live Demo: http://jsfiddle.net/hWCub/
If you want to hide overflow on fixed-position elements, the simplest approach I've found is to place the element inside a container element, and apply position:fixed
and overflow:hidden
to that element instead of the contained element (you must remove position:fixed
from the contained element for this to work). The content of the fixed container should then be clipped as expected.
In my case I was having trouble with using object-fit:cover
on a fixed-position element (it was spilling outside the bounds of the page body, regardless of overflow:hidden
). Placing it inside a fixed container with overflow:hidden
on the container fixed the issue.
As an alternative to using clip you could also use {border-radius: 0.0001px}
on a parent element. It works not only with absolute/fixed positioned elements.
Source: Stackoverflow.com