时间戳

首页 > 解决方案 > 在固定位置 div 下方动态定位 div

css - 在固定位置 div 下方动态定位 div

问题描述

我正在尝试将第二个粉红色 div 定位为根据顶部第一个 div（英雄）的高度动态垂直定位，然后在其上方滚动。

目前它有以下代码：

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 4rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: fixed;
  z-index: 0;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  height: 90vh;
  position: relative;
  z-index: 0;
  padding: 40px;
  margin-top: 90vh;
}
h2 {
  font-size: 3rem;
}
<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>

有没有一种聪明的方法可以用 CSS 做到这一点

标签： csscss-position

解决方案

粘性可以在这里提供帮助：

body {
  margin: 0px;
  font-family: helvetica;
}

h1 {
  font-size: 1rem;
  text-transform: uppercase;
  color: yellow;
}

.hero {
  position: sticky;
  background: grey;
  padding: 40px;
  top: 0;
}
.block {
  background: pink;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  padding: 40px;
}
h2 {
  font-size: 3rem;
}
<div class="hero">
  <h1>Intro block to be fixed position and under all other content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h1>
</div>

<div class="block">
    <h2>Second block to be position below the hero block and overlay on scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non orci eu odio suscipit sagittis. Sed vitae pretium sapien, vitae facilisis tellus. Praesent gravida interdum quam, id accumsan ex congue quis.
</h2>
</div>

推荐阅读