javascript - 无法让 Flickity slider 出现在两个 div 之间

Question

所以这是我的罪魁祸首网站:http://imranahmed.io/

由于某种原因，我无法获取“关于我”<div>直接出现在我的 flickity slider 下方- 而不是“关于我”页面与 slider 重叠， slider 消失在背景中。

这是一个示例，显示了覆盖图像的“关于我”页面:

我尝试将轮播的 css 设置为 display:inside-block但这没有任何区别，所以我对应该如何进行感到非常困惑。这是我的代码:

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>

about.html页面很简单，另一个 div 类称为“容器”

这是相应的 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;
}

我是 CSS 的新手，所以我不太确定自己做错了什么 - 非常感谢您的帮助和建议!

谢谢!

Answer 1

用class=flickity-slider去掉div上的position:absolute，后面的“about me”div会正确“clear”。

more info :

The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. It's overuse or improper use can limit the flexibility of your site.