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 · Answer 1 · 2017-09-30T18:55:03.623

118

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 '17 at 18:55

answered Jul 12 '10 at 00:10

Brian Moeskau

20,103
8
71
73

2

But then it's not positioned relative to the page anymore. – David A Jul 12 '10 at 00:30
6

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. – Brian Moeskau Jul 12 '10 at 00:46
adding `position: relative;` directly to the `body` element also works fine! – Dahou May 01 '22 at 18:22
@Dahou according to the question, the inner div should clip the image. Making the body position: relative does not do that. – Brian Moeskau May 02 '22 at 19:41

score 24 · Accepted Answer · answered Jul 12 '10 at 00:13

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 '10 at 00:13

Brock Adams

90,639
22
233
295

OK, I was afraid of that. Thanks! – David A Jul 12 '10 at 00:29
Hm what about this example `

` is there any reason for the inside div not to hide. Experiencing this behaviour in Safari for windows and Opera – Olga May 03 '12 at 12:11
8

This is not correct. Adding overflow:hidden; to your parent container will make the absolutely positioned element inside it not show outside . – Martin Andersson Oct 27 '12 at 17:09
1

@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](http://stackoverflow.com/editing-help#comment-formatting). – Brock Adams Oct 27 '12 at 20:27
4

@BrockAdams he wasn't replying to a comment though, he was commenting on an answer. – jazzpi Jun 25 '18 at 18:24

score 2 · Answer 3 · answered Feb 06 '14 at 04:22

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>

CSS overflow hidden with absolute position

3 Answers3

Linked

Related