Swiper 相对于 header 中其他元素的位置

Question

您好，我正在 header 文件中实施 Swiper，但我在正确定位它时遇到问题。

我想要什么： 导航菜单顶部的全高滑动器

我有什么： 高度有限的刷卡器

或覆盖导航菜单的全高

根据我对css的非常有限的理解，我认为我应该将我的header.css定位为相对的并且element-wise css 定位为绝对。问题是我不知道用 Swiper 显示的图片的确切尺寸（定位为绝对）所以我不能使用绝对对于其他 header 个元素。但我可能错了。

对于我对css/html的了解和误解，我深表歉意。非常新的学习者。

模板文件：

身高有限

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

全高刷卡覆盖nav-menus

<header id="header" class="header" >
  <div class="header-swiper"> 
        {%- include 'swiperheader.swig' %} 
   </div>
  <div class="header-inner"> 
          {%- include '_partials/header.swig' %} 
   </div>
</header>

CSS结构：

主要css:

.header { position: relative; background: $head-bg; height: 100%;}

.header-swiper { height: 100%; }
.header-inner { position: relative; height: 100%; }

@import "site-meta";
@import "site-nav";
@import "menu";

刷卡器css:

.swiper-container {
      position: absolute;
      width: 100%;
      height: 30%;                                                                                                     
    }

其他header元素css:

site-meta.css

.site-meta {                                                                                                           
  margin: 0;
  text-align: $site-meta-text-align;

  +mobile() { text-align: center; }
}

.brand {
  position: relative;
  display: inline-block;
  padding: 0 40px;
  color: $brand-color;
  background: $brand-bg;
  border-bottom: none;
  &:hover { color: $brand-hover-color; }
}

.logo {
  display: inline-block;
  margin-right: 5px;
  line-height: 36px;
  vertical-align: top;
}

.site-title {
  display: inline-block;
  vertical-align: top;

site-nav.css:

.site-nav-toggle {                                                                                                     
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  +mobile() {
    display: block;
  }

  button {
    margin-top: 2px;
    padding: 9px 10px;
    background: transparent;
    border: none;
  }
}

.site-nav {
  +mobile() {
    display: none;
    margin: 0 -10px;
    padding: 0 10px;
    clear: both;
    border-top: 1px solid $gray-lighter;
  }

menu.css:

.menu {
  margin-top: 20px;
  padding-left: 0;
  text-align: center;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 10px;
  list-style: none;

  @media screen and (max-width: 767px) {
    margin-top: 10px;
  }

完整swiperheader.swig代码

  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      position: absolute;
      width: 100%;
      height: 50%;
    }
    .swiper-slide {
   position: relative;
      height:auto;
      background-position: center;
      background-size: cover;
    }
    .swiper-slide.background-image {
   position: relative;
    }
  </style>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/1)">WCO</div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/2)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/3)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/4)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1000/1000/nightlife/5)"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-white"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>

  <!-- Swiper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      effect: 'fade',
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

Answer 1

我不太明白你想要实现的目标。如果你想获得一个全高的 swiper 幻灯片，你需要将 swiper-container class 中的高度设置为 100% 而不是 50。当然，swiper 幻灯片将覆盖你的第二部分 header。原因是，您将 header 的高度设置为 100%。因此，具有 100% 高度的 swiper 幻灯片将简单地覆盖整个 header。

如果您想要 100% 滑动条和 header 的第二部分，只需将

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

您的 </header> 标签之外的部分。

如果你想要一个 100% 的刷卡器和第二个内容在你的刷卡器顶部，只需将

<div class="header-inner"> 
      {%- include '_partials/header.swig' %} 
</div>

滑动条内部。

如果您尝试实现其他目标，请向我解释您到底需要更改什么。

Swiper 相对于 header 中其他元素的位置

Swiper position relative to other element in header

html

css

swiper