Question

我在before元素上遇到z-index问题。它目前位于幻灯片前面，但需要它坐在它后面。

我试图订购元素的z索引但没有运气。

https://codepen.io/mattbmoneypenny/pen/OEPPPG

$('.timeline-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true,
  centerPadding: '130px',
});

//Variables//

@white: #FFF;
@dark: #333;
@grey: #CCC;
@orange: #eb5b27;
@yellow: #fea30c;
@os: 'Open Sans', sans-serif;
@lato: 'Lato', sans-serif;

.cf {
  clear: both;
}

.slick-slide {
    outline: 0;
    margin-top: 30px;
    transition: 0.5s ease-in-out;
}

.slick-current {
    margin-top: 0px;
}

#timeline {
  width: 100%;
  padding: 30px 0;
  box-sizing: border-box;
  .container {
    max-width: 1020px;
    margin: 0 auto;
    h2 {
      text-align: center;
      font-family: @os;
      font-weight: 300;
      font-size: 32px;
      color: @dark;
    }
    .timeline-container {
      max-width: 960px;
      position: relative;
      margin: 0 auto;
      padding-top: 60px;
      &:before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin-top: 30px;
        background: linear-gradient(90deg, @orange, @yellow);
        height: 0.5px;
        width: 100%;
        z-index: 5;
      }
      .timeline-slider {
        position: relative;
        z-index: 10;
        display: block;
        &:before {
          content: "";
          display: block;
          position: absolute;
          left: 0px;
          top: 0;
          height: 100%;
          width: 120px;
          background: linear-gradient(90deg, @white, rgba(255, 255, 255, 0));
          z-index: 999997;
        }
        &:after {
          content: "";
          display: block;
          position: absolute;
          right: 0px;
          top: 0;
          height: 100%;
          width: 120px;
          background: linear-gradient(90deg, rgba(255, 255, 255, 0), @white);
          z-index: 999997;
        }
        .slick-arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          font-size: 0;
          border: 0;
          padding: 0;
          width: 40px;
          height: 40px;
          z-index: 999998;
          outline: 0;
          cursor: pointer;
          transition: 0.5s ease-in-out;
          &.slick-next {
            right: -40px;
            background: @yellow;
            &:hover {
              background: darken(@yellow, 20%);
            }
            &:before {
              content: "";
              border-top: 1px solid @white;
              border-right: 1px solid @white;
              width: 15px;
              height: 15px;
              transform: rotate(45deg);
              display: block;
              position: relative;
              left: 7px;
            }
          }
          &.slick-prev {
            left: -40px;
            background: @orange;
            &:hover {
              background: darken(@orange, 20%);
            }
            &:before {
              content: "";
              border-top: 1px solid @white;
              border-left: 1px solid @white;
              width: 15px;
              height: 15px;
              transform: rotate(-45deg);
              display: block;
              position: relative;
              left: 15px;
            }
          }
        }
        .slide {
          text-align: center;
          padding: 10px;
          box-sizing: border-box;
          font-family: @os;
          font-weight: 300;
          color: @dark;
          font-size: 16px;
          line-height: 22px;
          outline: 0 !important;
          strong {
            font-family: @os;
            font-weight: 500;
            font-size: 18px;
            color: @orange;
            margin-bottom: 20px;
            display: block;
          }
          img.full-img {
            width: 100%;
            display: block;
            margin-bottom: 20px;
          }
          &.full-block {
            .block {
              box-shadow: 0px 0px 21px -2px rgba(204,204,204,0.75);
              border-radius: 10px;
              padding: 20px;
              strong {
                color: @dark;
                font-weight: 700;
                display: inline-block;
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="timeline">
  <div class="container">
    <h2>A journey xxxx</h2>
    <div class="timeline-container">
      <div class="timeline-slider">
        <div class="slide full-block">
          <strong>2014</strong>
          <div class="block">
            <img class="full-img" src="http://mpadverts.azurewebsites.net/about-timeline/open.png" alt="US Office Open"/>
            Our US office <strong>opens</strong> in Charlston, South Carolina
          </div>
        </div>
        <div class="slide full-block">
          <strong>2015</strong>
          <div class="block">
            Our US office <strong>opens</strong> in Charlston, South Carolina
          </div>
        </div>
        <div class="slide full-block">
          <strong>2016</strong>
          <div class="block">
            Lorem ipsum dolor sit amet consectetur adipiscing elit diam, felis placerat vitae penatibus ac commodo ad.
          </div>
        </div>
        <div class="slide full-block">
          <strong>2014</strong>
          <div class="block">
            Our US office <strong>opens</strong> in Charlston, South Carolina
          </div>
        </div>
        <div class="slide full-block">
          <strong>2013</strong>
          <div class="block">
            Lorem ipsum dolor sit amet consectetur adipiscing elit diam, felis placerat vitae penatibus ac commodo ad.
          </div>
        </div>
        <div class="slide full-block">
          <strong>2014</strong>
          <div class="block">
            Our US office <strong>opens</strong> in Charlston, South Carolina
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

有关与位置相关的z-index的基本设置，请参阅附带的代码片段。我故意添加了两个绿色正方形，因为根据你的代码，你可能想要以某种深度模式阻止div。

为了在您的网页中获得正确的布局，您可能需要详细说明“position：absolute”和“position：relative”。

当您建立基础时，添加“之前”和“之后” - 伪元素。

.box-red {
  position: absolute;
  margin: 0px;
  z-index: 1;
  background-color: red;
  width: 80px;
  height: 300px;
}

.box-green-1 {
  position: absolute;
  margin: 50px;
  z-index: 2;
  background-color: green;
  width: 100px;
  height: 100px;
}

.box-green-2 {
  position: absolute;
  margin: 50px 0px 0px 170px;
  z-index: 2;
  background-color: green;
  width: 100px;
  height: 100px;
}

.box-blue {
  position: absolute;
  margin: 100px;
  z-index: 3;
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div class="box-red"></div>
<div class="box-green-1"></div>
<div class="box-green-2"></div>
<div class="box-blue"></div>

Answer 2

我解决了。幻灯片上没有设置背景色，因此实际上没有z-index问题，就像看起来那样。

元素之前的z-index问题

2 个答案: