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

Posted 2023-02-24

【中文标题】灯箱图像查看器在 CCS 中的定位

【英文标题】：Lightbox image viewer positioning in 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；

【参考方案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;