overflow property for absolute positioned elements

Question

How can I set the overflow: hidden property for an absolutely positioned element. I know that setting absolute position makes an element to not be in the document flow. Here's my code. I've been trying to set overflow: hidden for the img element for so long. please help me.

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<div>
<img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/>
</div>
</body>
</html>

CSS

body {
margin: 0;

}
div {
width: 100%;
overflow: hidden;
}

img {
position: absolute;
height: 100%;
clip: rect(0px, 678px, 600px, 0px)
}

may be this helps http://stackoverflow.com/questions/12463658/parent-child-with-position-fixed-parent-overflowhidden-bug — Bharath R, Oct 22 '13 at 16:21
Don't say like that, check that link , if it not for your question , share what you feel, this is the place where crores of questions answered and FYI without SO programmers would not have come so far. — Bharath R, Oct 22 '13 at 16:30

score 0 · Answer 1 · answered Oct 22 '13 at 17:05

Hi when you set a position: absolute you need to set his relative parent to. So in your code the relative parent is the <body>. If you set your div with

div {
  position:relative; 
}

Then it becomes into the relative parent, so your img will be displayed in relation with this container. Also to make it work you may need to set a fixed height.

Check this http://jsfiddle.net/WHq8U/33/

overflow property for absolute positioned elements

1 Answers1