3

Actually can't quite believe I can't solve this!

How can I get a fixed element to obey the overflow setting?

I have done a fiddle - http://jsfiddle.net/REk4C/7/

enter image description here

In the fiddle and the above image, you'll see a div that contains three divs, each have a different position setting. The relative element obeys the overflow. Now I would expect and can accept that the absolute element to break out, but I need the fixed element to obey the overflow is this possible?

Happy to use jQuery if needed.

Alex
  • 8,875
  • 2
  • 27
  • 44
  • 1
    the fiddle seems not to be complete, some of the classes used are missing – Michal Klouda Nov 28 '12 at 14:10
  • I don't understand.. This is the expected behavior according to the w3schools css positioning: http://www.w3schools.com/css/css_positioning.asp. It's ok that it only work with `position: relative`. – Diego Nov 28 '12 at 14:18
  • True i agree it's expected behavior. Just wondered if anyone had any dirty fixes. I think i may have found the dirty fix im after – Alex Nov 28 '12 at 14:22
  • There's an explanation to your issue here http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug hope it helps – wandarkaf Nov 28 '12 at 14:24
  • If your child div is inside a fixed positioned div, why are you specifying its position as fixed? What are you trying to achieve? – Diego Nov 28 '12 at 14:24

2 Answers2

3

Fixed and absolute positioned elements are taken out of the normal document flow, what means the borders of the original parent container have no influence on the element anymore.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
  • 6
    Slightly incorrect, an absolutely-positioned element *can* be clipped by its parent, if the parent is `relative` – however a fixed element cannot, under any circumstances, be constrained. – derrylwc Oct 04 '13 at 00:32
  • So @derrylwc, Is there any sensible way to make an absolutely-positioned element within a relative-container behave as if it was fixed? – Dom Vinyard Nov 04 '13 at 09:03
  • If the parent element were 100% width/height of the viewport, then technically the `absolute` child would behave as if it were fixed. But for all intensive purposes, you must either remove `relative` from the parent, or simply use `fixed` if you want to position an element relative to the viewport. – derrylwc Nov 11 '13 at 17:45
-1

To fix the absolute positioned div, create a new position context in the container:

#wrap {height:100px; width:100px; border:20px solid red; overflow:hidden;position:relative;}

The fixed positioned div goes completely out of the flow (and potentially outside the container box), so it is not possible. To demonstrate, make the fiddle window really small, and scroll the window vertically, and observe the fixed div moving outside the container.

sphair
  • 1,674
  • 15
  • 29
  • It seems your goal is really unclear! What are really trying to achieve with the fixed positioned div? – sphair Nov 28 '12 at 14:19