Kann nicht Flickity Schieber erscheinen zwischen zwei divs

Question

hier ist also meine Schuldige Website erhalten: http://imranahmed.io/

Aus irgendeinem Grund habe ich nicht die „Über mich“ <div> unter meinem flickity slider direkt erscheinen bekommen können - statt der Die Seite Über mich überlappt den Schieberegler und der Schieberegler verschwindet im Hintergrund.

Hier ist ein Beispiel, das die „über mich“ Seite für das Bild zeigt:

Ich habe versucht, die CSS des Karussells zu display:inside-block Einstellung aber das gemacht hat keinen Unterschied so I Ich bin sehr verwirrt darüber, wie ich vorgehen soll. Hier ist mein Code:

HTML:

--- 
layout: default 
title: index 
permalink:/
--- 

<script src="/bower_components/jquery/dist/jquery.min.js"></script> 
<script src="/static/js/flickity.pkgd.min.js"></script> 
<link href="/static/css/flickity.css" rel="stylesheet" media="screen"> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.flickity-slider').flickity({ 
      cellAlign: 'left', 
      contain: true, 
      autoPlay: true, 
      pageDots: false, 
      pauseAutoPlayOnHover: false 
     }); 
     $(".nav navbar-nav navbar-right").addClass("active"); 
    }); 
</script> 

<div class="navbar-wrapper"> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header page-scroll"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
       <a class="navbar-brand" href="#page-top" id="i18_title"><span data-i18n="website.title">{{ site.title }}</span></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right" id="i18_navbar"> 
        {% for section in site.data.landing %} 
        <li> 
         <a class="page-scroll" href="#{{ section.id }}"> 
          <span data-i18n="{{ section.i18n }}">{{ section.name }}</span> 
         </a> 
        </li> 
        {% endfor %} 

       </ul> 
      </div> 
     </div> 
    </nav> 
</div> 

<div class="flickity-slider"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

<div> 
{% for section in site.data.landing %} 
    {% assign loopindex = forloop.index | modulo: 2 %} 
    <section id="{{ section.id }}" class="features {% if loopindex != 1 %} gray-section {% endif %} {{ section.css }}" style="margin-top: 0px;"> 
     {% include sections/{{section.tpl}} %} 
    </section> 
{% endfor %} 
</div> 

Die about.html Seite ist einfach eine andere div Klasse namens "Container"

Und hier ist die entsprechende CSS:

.landing-page .flickity-slider{ 
    height: 30%; 
} 
.landing-page .carousel-cell{ 
    width: 100%; /* full width */ 
    height: 470px; /* height of carousel */ 
    max-height: 470px; 
    max-width: 100%; 
    margin-right: 10px; 
    display: inline-block; 
    position: relative; 

} 
.landing-page .carousel-image{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    max-width: 100% 
    max-height: 30% 
    object-fit: contain; 
} 

Ich bin sehr neu bei CSS, daher bin ich mir nicht sicher, was ich falsch mache - Hilfe und Ratschläge wären sehr willkommen!

Danke!

Answer 1

Entfernen Sie die position:absolute auf div mit class=flickity-slider, und die anschließende "über mich" Div wird "klar" richtig.

more info:

Der Trade-off, und wichtigste Sache zu erinnern, über absolute Positionierung ist, dass diese Elemente aus dem Fluss der Elemente auf der Seite entfernt werden. Ein Element mit dieser Art der Positionierung ist nicht von anderen Elementen betroffen und beeinflusst andere Elemente nicht. Diese ist eine ernsthafte Sache, jedes Mal zu berücksichtigen, wenn Sie absolute Positionierung verwenden. Es ist Überbeanspruchung oder unsachgemäße Verwendung kann die Flexibilität von Ihrer Website begrenzen.

Answer 2

Ändern Sie diesen Teil des Codes

<div class="flickity-slider"> 
{% for slider in site.data.slider %} 
<div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
{% endfor %} 

zu

<div class="carousel"> 
    {% for slider in site.data.slider %} 
    <div class="carousel-cell"><img class="carousel-image" src="{{ slider.img | prepend: site.baseurl }}" alt=""></div> 
    {% endfor %} 
</div> 

Die flickity-slider Klasse ist "interne" Klasse von flickity, die einige Standardstil hat. Dies ist der Grund, warum die Über mich-Sektion oben auf dem Schieberegler liegt.

Bitte denken Sie daran, dass Sie Klasse auch in JS-Code

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.carousel').flickity({ 
     cellAlign: 'left', 
     contain: true, 
     autoPlay: true, 
     pageDots: false, 
     pauseAutoPlayOnHover: false 
    }); 
    $(".nav navbar-nav navbar-right").addClass("active"); 
}); 

Nur für den Fall ändern, wenn Sie Höhe Karussell definieren möchten, können Sie es wie im Beispiel in offiziellen Dokumenten tun : http://flickity.metafizzy.co/options.html#setgallerysize