Crazy tech-spirit

— world of technologies

CSS-Overflow hidden not working for absolutely positioned elements

Adding the parent element with position:relative; solves the problem.

<html>
    <head>
        <title>project</title>
    </head>
    <body>
        div id="wrapper">
            div id="content">
                img src="image.jpg" width="1400" height="1200" />
            /div>
        /div>
    </body>
</html>

In order to have absolute positioned “wrapper img” work with the property of overflow: hidden, position the parent element “wrapper” to relative.

#wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#content {
    width: 100%;
    height: 100%;
}

#wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}