定位在模态窗口之外时图像被截断

Question

我有这个 html 文件：

<div style="
width:400px;
height:300px;
background-color:#009966;">
</div>

我将它作为带有颜色框的模态窗口打开，它具有以下 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;
}

我尝试过使用“X”按钮的位置，我希望它位于 DIV 之外，例如通过修改 #cboxClose 将其设置为顶部 50 像素和右侧 50 像素，但该图像被剪切了关闭，如您在照片中所见。

这是什么原因造成的？

Answer 1

容器#cboxWrapper 设置了overflow: hidden;（靠近包含的CSS 的顶部）；如果您将 overflow: visible; 添加到该选择器，您移动的 X 按钮应该是可见的。

我不建议更改原始的overflow: hidden; 声明，因为它涉及其他选择器，而只需添加以下内容：

#cboxWrapper {
    overflow: visible;
}