18

Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?

Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
 <div style="top:30px;width:50px;height:100px;background:yellow">
 </div>
 <div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
 </div>
</div>

The code can be also found at http://jsfiddle.net/kZBxD/

Tom Yeh
  • 1,987
  • 2
  • 15
  • 23
  • do you need something like this: http://jsfiddle.net/kZBxD/3/ – Jack Mar 17 '12 at 07:15
  • Have you ever found a way to achieve this? That's exactly what I need and your question is the only reference I can found. – VitoshKa Jul 15 '16 at 19:19

2 Answers2

4

Do you need something like this:

check this fiddle : http://jsfiddle.net/kZBxD/3/

<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>

Jack
  • 1,442
  • 12
  • 20
  • 3
    Thanks. Yes, fixed position can solve the issue of clipping. Unfortunately, it won't move as its parent or window is scrolled. Possible to have both (not-clipping and move with parent)? – Tom Yeh Mar 17 '12 at 07:36
  • actually i am not understanding what you want, everything is possible – Jack Mar 17 '12 at 07:52
  • 2
    http://jsfiddle.net/kZBxD/5/ The yellow one won't be clipped, and it is what I want. But, when I scrolls its parent, it doesn't move with it -- it is not what I want. Can I make it not-clipped but able to move with its parent? – Tom Yeh Mar 17 '12 at 08:35
  • Too bad! iOS 4.x doesn't support position:fixed:( – Tom Yeh Apr 22 '12 at 05:10
  • Try position:static see if it helps – Jack Apr 22 '12 at 05:44
  • This might help. http://stackoverflow.com/questions/4889601/css-position-fixed-into-ipad-iphone – Jack Apr 22 '12 at 05:46
0

try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.

http://jsfiddle.net/kZBxD/2/

w3uiguru
  • 5,864
  • 2
  • 21
  • 25
  • Thanks. Unfortunately, I have to make the outer div absolute too. The nested absolute div will be cropped too: http://jsfiddle.net/kZBxD/2/ – Tom Yeh Apr 22 '12 at 05:07