灯箱图像查看器在 CCS 中的定位答案

【问题标题】：Lightbox image viewer positioning in CCS灯箱图像查看器在 CCS 中的定位
【发布时间】：2017-03-15 07:50:39
【问题描述】：

我想在我的网站中将打开的图片定位在下方，因为菜单将打开的图片覆盖在顶部 5% 的位置。
My website

HTML：

            <div class="row">
<div class="col-margin col-sm-12">
    <div class="content-gallery">
        <div class="gallery-control left"></div>
        <div class="gallery-control right"></div>

        <div class="gallery-img-wrap">
            <a                           href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen3.jpg"         class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen3_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen2.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen2_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen5.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen5_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen6.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen6_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen7.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen7_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen8.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen8_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen9.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen9_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen10.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen10_s.jpg')" data-lightbox="gallery"></a>
            <a href="http://phuket.hu/static/img/content/hc4/szalloda_phuketen11.jpg" class="gallery-img" style="background-image: url('http://phuket.hu/static/img/content/hc4/szalloda_phuketen11_s.jpg')" data-lightbox="gallery"></a>
        </div>
    </div>
</div>

CSS：

/* 预加载图片 */ 正文：{之后内容： url(../images/lightbox/close.png) url(../images/lightbox/loading.gif) url(../images/lightbox/prev.png) url(../images/lightbox/下一个.png); 显示：无； } .lightboxOverlay { 位置：绝对；顶部：0；左：0； z指数：9999；背景颜色：黑色；过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 不透明度：0.8；显示：无； } 。灯箱 { 位置：绝对；左：0；宽度：100%； z 指数：10000；文本对齐：居中；行高：0；字体系列：'KeepCalm'，无衬线；字体粗细：正常； } .lightbox .lb-image { 显示：块；高度：自动；最大宽度：继承； -webkit-border-radius：3px； -moz-边界半径：3px； -ms-边框半径：3px； -o-边界半径：3px；边框半径：3px； } .lightbox 一个 img { 边框：无； } .lb-outerContainer { 位置：相对；背景颜色：白色； *缩放：1；宽度：250px；高度：250px；边距：0 自动； -webkit-border-radius：4px； -moz-边界半径：4px； -ms-边界半径：4px； -o-边界半径：4px；边框半径：4px； } .lb-outerContainer：在 { 内容： ””; 显示：表格；明确：两者； } .lb-容器{ 填充：4px； } .lb-loader { 位置：绝对；最高：43%；左：0；高度：25%；宽度：100%；文本对齐：居中；行高：0； } .lb-取消 { 显示：块；宽度：32px；高度：32px；边距：0 自动；背景：url(../images/lightbox/loading.gif) 不重复； } .lb-导航 { 位置：绝对；顶部：0；左：0；高度：100%；宽度：100%； z 指数：10； } .lb 容器 > .nav { 左：0； } .lb-导航一个{ 大纲：无；背景图像： url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAAAAAAEAAAICRAEAOw=='); } .lb-prev, .lb-next { 高度：100%；光标：指针；显示：块； } .lb-nav a.lb-prev { 宽度：34%；左：0；向左飘浮; 背景： url(../images/lightbox/prev.png) 剩下 48% 不重复；过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 不透明度：0； -webkit-transition：不透明度 0.6s； -moz-transition：不透明度0.6s； -o-transition：不透明度0.6s；过渡：不透明度0.6s； } .lb-nav a.lb-prev:hover { 过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 不透明度：1； } .lb-nav a.lb-next { 宽度：64%；右：0；浮动：对；背景： url(../images/lightbox/next.png) 对 48% 无重复；过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 不透明度：0； -webkit-transition：不透明度 0.6s； -moz-transition：不透明度0.6s； -o-transition：不透明度0.6s；过渡：不透明度0.6s； } .lb-nav a.lb-next:hover { 过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 不透明度：1； } .lb-dataContainer { 边距：0 自动；填充顶部：5px； *缩放：1；宽度：100%； -moz-border-radius-bottomleft：4px； -webkit-border-bottom-left-radius: 4px; 边框左下角半径：4px； -moz-border-radius-bottomright：4px； -webkit-border-bottom-right-radius: 4px; 边框右下角半径：4px； } .lb-dataContainer：在 { 内容： ””; 显示：表格；明确：两者； } .lb-数据{ 填充：0 4px；颜色：#ccc； } .lb-数据 .lb-详细信息 { 宽度：85%；向左飘浮; 文本对齐：左；行高：1.1em； } .lb 数据 .lb 标题 { 字体大小：13px；字体粗细：粗体；行高：1em； } .lb 数据 .lb 编号 { 显示：块；清除：左；底部填充：1em；字体大小：12px；颜色：#999999； } .lb-数据 .lb-close { 显示：块；浮动：对；宽度：30px；高度：30px；背景：url(../images/lightbox/close.png) 右上角无重复；文本对齐：右；大纲：无；过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 不透明度：0.7； -webkit-transition：不透明度 0.2s； -moz-transition：不透明度 0.2s； -o-transition：不透明度0.2s；过渡：不透明度0.2s； } .lb-数据 .lb-close:hover { 光标：指针；过滤器：progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 不透明度：1； }

【问题讨论】：

标签： html positioning lightbox

【解决方案1】：

在你的 lb-outerContainer 类和你的 lb-dataContainer 类上添加 50px

.lb-outerContainer {
   position: relative;
    background-color: white;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    /* top: 50px; */
    top: 50px;
}
.lb-outerContainer{
    margin: 0 auto;
    padding-top: 5px;
    top: 50px;
    position: relative;
    width: 100%;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

【讨论】：