Question

我在重叠的<div>中遇到了一个问题，如您在提供的代码段中所见（我试图尽可能简化我的代码）。我想要实现的是，section--red是固定的，因此section--green和section--blue在滚动时会重叠，而section--blue在section--green之后。有没有办法在两个元素上都没有设置固定的height的情况下实现此目标？任何输入都非常感谢！

.section--red {
    position: fixed;
    top: 0;
    z-index: -1;
    height: 100vh;
    background-color: maroon;
}

.section--green {
    position: relative;
    padding-top: 160px;
    top: 100vh;
    z-index: 2;
}

.section--green:before {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    display: block;
    width: 100vw;
    height: calc(100% + 160px);
    content: "";
    background-color: olive;
    transform: translate(-50%);
}

.section--blue {
    background-color: teal;
}

<div class="section--red">
  <h1>Hi!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
  <p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
  <p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>

Answer 1

只需从元素中删除位置：。

.section--red {
    position:fixed;
    top: 0;
    z-index: -1;
    height: 100vh;
    background-color: maroon;
}

.section--green {
    background-color: green;
    margin-top: 100vh;
    z-index: 2;
}

.section--green:before {
    position: 
    top: 0;
    left: 50%;
    z-index: -1;
    display: block;
    width: 100vw;
    height: calc(100% + 160px);
    content: "";
    background-color: olive;
    transform: translate(-50%);
}

.section--blue {
    background-color: teal;
    display:table-cell;
}

<div class="section--red">
  <h1>Hi!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus turpis sed venenatis euismod. Quisque in eleifend lorem. In hac habitasse platea dictumst. Nunc ligula risus, porta sollicitudin quam lobortis, malesuada hendrerit lectus. Fusce eu lacus sed nunc dignissim efficitur ac sed urna. Nulla magna metus, ultrices in nunc posuere, pretium faucibus nisi. Sed commodo mauris eu mattis condimentum.</p>
</div>
<div class="section--green">
  <p>Phasellus eu rhoncus magna. Aliquam facilisis tincidunt nisi vel convallis. Vestibulum varius vestibulum diam vel molestie. Ut fermentum ipsum et cursus vulputate. Suspendisse finibus odio sit amet erat volutpat molestie dignissim ac ante. Aliquam dui enim, congue vel nisi at, molestie iaculis ipsum. Ut varius, mi sed pellentesque congue, turpis mauris aliquam lorem, ac efficitur metus tellus vitae dolor. Suspendisse at ultrices sapien. Donec vestibulum diam vel facilisis ullamcorper. Maecenas tincidunt neque magna, quis gravida est gravida id.</p>
</div>
<div class="section--blue">
  <p>Mauris auctor diam mauris, sit amet viverra arcu commodo quis. Curabitur gravida massa arcu, sed vestibulum dolor feugiat eget. Phasellus ipsum massa, consectetur vel libero vitae, semper tempus turpis. Vestibulum a fermentum enim. Mauris ac velit sapien. Sed ut tortor et ante mollis posuere et at ante. Integer tempus purus nec nisi placerat dictum. Praesent faucibus sodales lorem ut ultricies. Mauris suscipit eleifend nisl, malesuada elementum dui imperdiet vitae. Pellentesque pulvinar turpis vitae felis tristique accumsan. Mauris eu massa in mi placerat pharetra. Mauris consequat, mi nec sollicitudin pharetra, nisl quam porta turpis, eget posuere orci nisl vel elit. Integer porttitor fringilla malesuada. Mauris congue magna est, vitae tempus ante facilisis vitae.</p>
</div>

避免div重叠

1 个答案: