Swiper position relative to other element in heade

问题:

Hi I am implementing Swiper in my header file but I have problems correctly positioning it.

WHAT I WANT: FUll height Swiper on top of navigation menu

WHAT I HAVE: Limited height Swiper

or full height covering the navigation menu

From my very limited understanding of css, I think I should have my header.css positioned as relative and element-wise css positioned as absolute. The problem is that I do not know the exact dimension of pictures going to be shown with Swiper (positioned as absolute) so I cann't use absolute for other header elements. But I am probably wrong.

I apologize for my limited knowledge and misunderstandings of css/html. Very new learner.

Template file:

limited height siwper

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

full height swiper covering 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 structure:

Main 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";

Swiper css:

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

Other header element 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;
  }

full swiperheader.swig code

  <!-- 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>

回答1:

I dont quite get what you're trying to achieve. If you are trying to get a full height swiper slide you need to set the height in your swiper-container class to 100% instead of 50. Of course the swiper slide will then cover your second part of the header. The reason for that is, that you set the height of your header to 100%. Therefore a swiper slide with 100% height will simply cover the whole header.

If you want to have a 100% swiper and the second part of your header underneath this slide just put the

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

part outside of your </header> Tag.

If you want to have a 100% swiper and the second content on Top of your swiper just put the

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

inside the swiper slides.

If you try to achieve something else please explain me what exactly you need to change.