Lightbox Bild Viewer Positionierung in CCS

Question

Ich möchte Positionierung geöffnete Bilder ein wenig nach unten in meiner Website, weil das Menü abgedeckt ist die geöffneten Bilder 5% oben.
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:

 

    /* Preload images */ 
    body:after { 
     content: url(../images/lightbox/close.png) url(../images/lightbox/loading.gif) url(../images/lightbox/prev.png) url(../images/lightbox/next.png); 
     display: none; 
    } 

    .lightboxOverlay { 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 9999; 
     background-color: black; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); 
     opacity: 0.8; 
     display: none; 
    } 

    .lightbox { 
     position: absolute; 
     left: 0; 
     width: 100%; 
     z-index: 10000; 
     text-align: center; 
     line-height: 0; 
     font-family: 'KeepCalm', sans-serif; 
     font-weight: normal; 
    } 

    .lightbox .lb-image { 
     display: block; 
     height: auto; 
     max-width: inherit; 
     -webkit-border-radius: 3px; 
     -moz-border-radius: 3px; 
     -ms-border-radius: 3px; 
     -o-border-radius: 3px; 
     border-radius: 3px; 
    } 

    .lightbox a img { 
     border: none; 
    } 

    .lb-outerContainer { 
     position: relative; 
     background-color: white; 
     *zoom: 1; 
     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; 
    } 

    .lb-outerContainer:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 

    .lb-container { 
     padding: 4px; 
    } 

    .lb-loader { 
     position: absolute; 
     top: 43%; 
     left: 0; 
     height: 25%; 
     width: 100%; 
     text-align: center; 
     line-height: 0; 
    } 

    .lb-cancel { 
     display: block; 
     width: 32px; 
     height: 32px; 
     margin: 0 auto; 
     background: url(../images/lightbox/loading.gif) no-repeat; 
    } 

    .lb-nav { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 100%; 
     width: 100%; 
     z-index: 10; 
    } 

    .lb-container > .nav { 
     left: 0; 
    } 

    .lb-nav a { 
     outline: none; 
     background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); 
    } 

    .lb-prev, .lb-next { 
     height: 100%; 
     cursor: pointer; 
     display: block; 
    } 

    .lb-nav a.lb-prev { 
     width: 34%; 
     left: 0; 
     float: left; 
     background: url(../images/lightbox/prev.png) left 48% no-repeat; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
     opacity: 0; 
     -webkit-transition: opacity 0.6s; 
     -moz-transition: opacity 0.6s; 
     -o-transition: opacity 0.6s; 
     transition: opacity 0.6s; 
    } 

    .lb-nav a.lb-prev:hover { 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
     opacity: 1; 
    } 

    .lb-nav a.lb-next { 
     width: 64%; 
     right: 0; 
     float: right; 
     background: url(../images/lightbox/next.png) right 48% no-repeat; 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
     opacity: 0; 
     -webkit-transition: opacity 0.6s; 
     -moz-transition: opacity 0.6s; 
     -o-transition: opacity 0.6s; 
     transition: opacity 0.6s; 
    } 

    .lb-nav a.lb-next:hover { 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
     opacity: 1; 
    } 

    .lb-dataContainer { 
     margin: 0 auto; 
     padding-top: 5px; 
     *zoom: 1; 
     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; 
    } 

    .lb-dataContainer:after { 
     content: ""; 
     display: table; 
     clear: both; 
    } 

    .lb-data { 
     padding: 0 4px; 
     color: #ccc; 
    } 

    .lb-data .lb-details { 
     width: 85%; 
     float: left; 
     text-align: left; 
     line-height: 1.1em; 
    } 

    .lb-data .lb-caption { 
     font-size: 13px; 
     font-weight: bold; 
     line-height: 1em; 
    } 

    .lb-data .lb-number { 
     display: block; 
     clear: left; 
     padding-bottom: 1em; 
     font-size: 12px; 
     color: #999999; 
    } 

      .lb-data .lb-close { 
       display: block; 
       float: right; 
       width: 30px; 
       height: 30px; 
       background: url(../images/lightbox/close.png) top right no-repeat; 
       text-align: right; 
       outline: none; 
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); 
       opacity: 0.7; 
       -webkit-transition: opacity 0.2s; 
       -moz-transition: opacity 0.2s; 
       -o-transition: opacity 0.2s; 
       transition: opacity 0.2s; 
      } 

      .lb-data .lb-close:hover { 
       cursor: pointer; 
       filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
       opacity: 1; 
      } 

Answer 1

Add 50px auf lb-outerContainer Klasse und auch auf Ihrem lb-Datacontainer Klasse

.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; 
}