CSS overflow hidden with absolute position

Question

I want to absolute position an image that I will be moving around in a div and want anything that extends outside the div to be clipped. Here is an example of the problem:

<html>
<body>
  <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

So, I want the right edge of the logo to not display. Ideas?

Brian Moeskau · Accepted Answer · 2017-09-30 18:55:03Z

125

Try adding position: relative to your outer div. This will position the image relative to that div (honoring the overflow style) instead of relative to the page.

Example:

<html>
<body>
  <div style="position: relative; width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: absolute; top: 10px; left: 250px; z-index: -1;"><img src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

See it on JS Bin

edited Sep 30, 2017 at 18:55

answered Jul 12, 2010 at 0:10

Brian Moeskau

20.5k8 gold badges73 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

David A Over a year ago

But then it's not positioned relative to the page anymore.

Brian Moeskau Over a year ago

If the image is suppose to "move around in the div" why would you want it relative to the page? Maybe I'm missing something.

Molkan Over a year ago

adding position: relative; directly to the body element also works fine!

Brian Moeskau Over a year ago

@Dahou according to the question, the inner div should clip the image. Making the body position: relative does not do that.

nitwit Over a year ago

thanks, this worked for me. for tailwind users add relative overflow-hidden to parent.

Brock Adams · Accepted Answer · 2010-07-12 00:13:11Z

24

Since the image's container is positioned absolutely, it is outside of the flow of the "containing" div.

Your choices are to either position relatively or to adjust the dimensions of the absolutely-positioned div, dynamically, with jQuery.

answered Jul 12, 2010 at 0:13

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

5 Comments

David A Over a year ago

OK, I was afraid of that. Thanks!

Olga Over a year ago

Hm what about this example

<div style="width: 120px; height: 600px; overflow: hidden; position:absolute; left: Npx; top: Mpx;">    <div style="position: relative; width: 120px; height: 600px; top: 0px; left: -120px;"></div></div>

is there any reason for the inside div not to hide. Experiencing this behaviour in Safari for windows and Opera </div>

Martin Andersson Over a year ago

This is not correct. Adding overflow:hidden; to your parent container will make the absolutely positioned element inside it not show outside .

Brock Adams Over a year ago

@MartinAndersson, When replying to a comment, please use the @user-name address. This both clarifies what you are referring to and alerts the specified user. See "Replying in comments", here.

jazzpi Over a year ago

@BrockAdams he wasn't replying to a comment though, he was commenting on an answer.

Christos Hrousis · Accepted Answer · 2014-02-06 04:22:31Z

2

Move the position absolute to the image, then add the relative to the parent container. Worked for me in a similar situation.

<html>
<body>
  <div style="width: 500px; height: 200px; border: 1px solid black; overflow: hidden;">
    <div style="width: 200px; height: 50px; margin: auto; border: 1px solid black; background: gray;">On top of image.</div>
    <div style="position: relative; overflow:hidden;"><img style="position: absolute; top: 10px; left: 250px; z-index: -1;" src="http://www.google.com/logos/worldcupfinale10-hp.gif" /></div>
  </div>
</body>
</html>

answered Feb 6, 2014 at 4:22

Christos Hrousis

7154 silver badges16 bronze badges

Collectives™ on Stack Overflow

CSS overflow hidden with absolute position

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related