# \[CSS\] A position:relative element inside an overflow:hidden element?

**URL:** https://forum.kirupa.com/t/css-a-position-relative-element-inside-an-overflow-hidden-element/175269
**Category:** web dev
**Created:** [January 13, 2006, 1:28am UTC](https://forum.kirupa.com/t/css-a-position-relative-element-inside-an-overflow-hidden-element/175269 "2006-01-13T01:28:56Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![MTsoul](https://avatars.discourse-cdn.com/v4/letter/m/91b2a8/32.png) [@MTsoul](https://forum.kirupa.com/u/MTsoul)
#### Post date: [January 13, 2006, 1:28am UTC](https://forum.kirupa.com/t/css-a-position-relative-element-inside-an-overflow-hidden-element/175269/1 "2006-01-13T01:28:56Z")

</div>

Hi all,

I encountered this annoying problem:

An element with the CSS property “position: relative” inside a div that has the property “overflow: hidden” flows out of the parent div in Internet Explorer and Opera. This works fine in Firefox - it hides if it overflows - but is very problematic in IE/Opera.

Here’s my example: [http://mtsix.net/](http://mtsix.net/) - on the bottom left, that’s supposed to look fine under Firefox (try the Older/Newer buttons), but it just screws up completely in IE and Opera.

Is there a way around this? I have to use position:relative for the inner element because I need to use Javascript to change the CSS top value so it has that scroll effect. Any ideas?