html - 如何使跨度通过 2 个容器 div

Question

如何通过 2 个 bootstrap 的容器 div 使带有粘性元素的 span float ？

现在我无法让 span 元素粘在容器 div 的顶部，容器将始终位于 span 元素的下方。此外，当缩小到移动 View 时，我希望内容 1 保持在上方，然后是带有图像的 span 元素，最后是内容 2。每个容器都有一个背景图像，所以我希望 span 元素可以移动上下通过 2 个容器。非常感谢你提前。

这是我期望的结果:

这是 jsfiddle 链接:https://jsfiddle.net/oafwmghd/2/

#sticky {
   position: -webkit-sticky;
   position: sticky;
   display: flex;
   display: -ms-flex;
   display: -webkit-flex;
   justify-content: center;
   margin-top: 30px;
   padding-bottom: 80px;
   top: 0;
   z-index: 1;
 }

<div class="container">
    <span><img
     src="https://previews.123rf.com/images/sooolnce/sooolnce1611/sooolnce161100038/66323541-realistic-plastic-bottle-for-water-on-a-transparent-background-vector-illustration.jpg"
            width=20% height=50% id="sticky"></span>
    <section>
        <div class="container" style="height:500px; background-color: green;">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-0">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    Content 1
                </div>
            </div>
        </div>
    </section>
    <section>
        <div class="container" style="height:500px; background-color: red;">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-0">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    Content 2
                </div>
            </div>
        </div>
    </section>
</div>

Answer 1

如果您使用 margin-left:auto(类:ml-auto)，您可能不需要这些空元素。

要重新排序元素，您需要一个 flex 或网格容器，您可以将容器重置为列 flex 盒(类:d-flex flex-column)

没有订购响应类(据我所知)，您可以创建您需要的类和断点，同时删除粘性行为。

可以使用负边距或绝对位置来避免图像将内容压低。让我们尝试位置或 margin .

一种方法可以是:

#sticky {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  justify-content: center;
  margin-top: 30px;
  width: 50%;
  top: 1em;
  z-index: 1;
  margin-left: 0;
  border: 0;
  order: -1
}

#sticky img {
  position: absolute;
}

@media (max-width: 768px) {
  .order-sm-1 {
    order: 1;
  }
  #sticky.order-sm-2 {
    order: 2;
  }
  #sticky img {
    position: static;
  }
  .order-sm-3 {
    order: 3;
  }
  #sticky {
    position: static;
    margin: auto;
    width: auto;
  }
}


/* demo purpose*/

section {
  border: solid;
  margin-bottom: 1em;
}

.row .ml-auto {
  min-height: 300px;
  background: green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container d-flex flex-column">
  <section class="row col-lg-6 col-md-6 col-sm-12   order-sm-2" id="sticky"><img src="https://images.containerstore.com/catalogimages/318610/ColoredStopperBottlesClear_x.jpg?width=1200&height=1200&align=center" width=80%></section>

  <section class="order-sm-1">
    <div class="container">
      <div class="row">
        <!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
        <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
          <p><b>Play the snippet in full page mode and resize the window to checkout the behavior</b></p>
        </div>
      </div>
    </div>
  </section>

  <section class="order-sm-3">
    <div class="container">
      <div class="row">
        <!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
        <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
          Content 2
        </div>
      </div>
    </div>
  </section>

</div>

跟进评论:

#sticky {
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  justify-content: center;
  margin-top: 30px;
  width: 30%;
  top: 4em;
  z-index: 1;
  margin-left: 0;
  border: 0;
  order: -1;
  flex: 0 0 auto;
}

#sticky img {
  position: absolute;
}

@media (max-width: 768px) {
  .order-sm-1 {
    order: 1;
  }
  #sticky.order-sm-2 {
    order: 2;
  }
  #sticky img {
    position: static;
  }
  .order-sm-3 {
    order: 3;
  }
  #sticky {
    position: static;
    margin: auto;
    width: auto;
  }
}


/* demo purpose*/

section {
  border: solid;
  margin-bottom: 1em;
}

.row .ml-auto {
  min-height: 200px;
  background: green;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="container d-flex flex-column p-0">
    <section class="row col-lg-6 col-md-6 col-sm-12   order-sm-2" id="sticky"><img src="https://images.containerstore.com/catalogimages/318610/ColoredStopperBottlesClear_x.jpg?width=1200&height=1200&align=center" width=80%></section>

    <section class="order-sm-1">
      <div class="container">
        <div class="row">
          <!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
          <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
            <p><b>Play the snippet in full page mode and resize the window to checkout the behavior</b></p>
          </div>
        </div>
      </div>
    </section>


  </div>
  <section class="order-sm-3">
    <div class="container">
      <div class="row">
        <!--<div class="col-lg-6 col-md-6 col-sm-0"></div>-->
        <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
          Content 2
        </div>
      </div>
    </div>
  </section>

</div>

<div class="container">
  <section>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
          Content 3
        </div>
      </div>
    </div>
  </section>


  <section>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 ml-auto">
          Content 4
        </div>
      </div>
    </div>
  </section>
</div>