Question

我有这个html文件：

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

我打开它作为带有colorbox的模态窗口，它有这个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向前50px和向右50px，但是那个图像如图所示，你会被切断。

enter image description here

造成这种情况的原因是什么？

Answer 1

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

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

#cboxWrapper {
    overflow: visible;
}

定位在模态窗口之外时，图像会被切断

1 个答案: