0

In a classic modal box I have something like this:

<div id="container">

    <div id="content"></div>

    <div id="closeButton"></div>

</div>

with this style:

#container { position: absolute; overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }

but my close icon is obviously cropped by the parent because of overflow: hidden, but I can't set overflow:visible because the scrollbars appears on the page.

So, is there a way to make my close button positioned out of the parent but uncropped?

Thank you so much in advance, any help will be apreciated.

NOTE: it's something different from this other question, because parent element is positioned absolute, not relative!

Community
  • 1
  • 1
bobighorus
  • 1,152
  • 4
  • 17
  • 35

1 Answers1

0

Yes it is but not this way. You need to put your closeButton outside the div with the overflow property set to hidden: 

<div id="container">
    <div id="content-container"><div id="content"></div></div>
    <div id="closeButton"></div>
</div>

And the style: 

#container { position: relative; /* or absolute */ overflow: visible; }
#content-container { overflow: hidden; }
#closeButton { position: absolute; top: -10px; right: -10px; }
arthur
  • 950
  • 1
  • 5
  • 18
  • Actually you can't display an element outside its parent if its parent has the CSS property overflow set to hidden. That's the purpose of this property… So you have two solution: you tan change your HTMl code to put closeButton outside OR you have to set the overflow property to visible. – arthur Jan 27 '12 at 14:17