Image gets cutt off when positioning outside of a modal window - html

Question

I have this html file:
<div style="
width:400px;
height:300px;
background-color:#009966;">
</div>
I'm opening it as a modal window with colorbox, that has this CSS:
#cboxOverlay, #cboxWrapper, #colorbox {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
overflow: hidden;
}
#cboxWrapper {
max-width: none;
}
#cboxOverlay {
position: fixed;
width: 100%;
height: 100%}
#cboxBottomLeft, #cboxMiddleLeft {
clear: left;
}
#cboxContent {
position: relative;
}
#cboxLoadedContent {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#cboxTitle {
margin: 0;
}
#cboxLoadingGraphic, #cboxLoadingOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}
#cboxClose, #cboxNext, #cboxPrevious, #cboxSlideshow {
cursor: pointer;
}
.cboxPhoto {
float: left;
margin: auto;
border: 0;
display: block;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#cboxContent, #cboxLoadedContent, #colorbox {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 32px;
overflow: visible;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
padding: 1px;
}
#cboxLoadingGraphic {
background: url(../images/loading.gif) no-repeat center center;
}
#cboxLoadingOverlay {
background: #000;
}
#cboxTitle {
position: absolute;
top: -22px;
left: 0;
color: #000;
}
#cboxCurrent {
position: absolute;
top: -22px;
right: 205px;
text-indent: -9999px;
}
#cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
text-indent: -9999px;
width: 20px;
height: 20px;
position: absolute;
top: -30px;
left:390px;
background: url(../images/controls.png) no-repeat;
}
#cboxClose:active, #cboxNext:active, #cboxPrevious:active, #cboxSlideshow:active {
outline: 0;
}
#cboxPrevious {
background-position: 0 0;
right: 44px;
}
#cboxPrevious:hover {
background-position: 0 -25px;
}
#cboxNext {
background-position: -25px 0;
right: 22px;
}
#cboxNext:hover {
background-position: -25px -25px;
}
#cboxClose {
background-position: -50px 0;
right: 0;
}
#cboxClose:hover {
background-position: -50px -25px;
}
.cboxSlideshow_off #cboxPrevious, .cboxSlideshow_on #cboxPrevious {
right: 66px;
}
.cboxSlideshow_on #cboxSlideshow {
background-position: -75px -25px;
right: 44px;
}
.cboxSlideshow_on #cboxSlideshow:hover {
background-position: -100px -25px;
}
.cboxSlideshow_off #cboxSlideshow {
background-position: -100px 0;
right: 44px;
}
.cboxSlideshow_off #cboxSlideshow:hover {
background-position: -75px -25px;
}
I've tried playing with the position of the "X" button, I want it to be outside of the DIV, say 50px to the top and 50px to the right, by modifying #cboxClose, but that image gets cutted off, as you can see in the photo.
what's causing this?

Answer 1

The container #cboxWrapper has overflow: hidden; set (near the top of your included CSS); if you add overflow: visible; to that selector, your moved X button should be visible.
I wouldn't recommend changing the original overflow: hidden; declaration, since it involves other selectors, but just adding the the following:
#cboxWrapper {
overflow: visible;
}