CSS“位置：固定”滚动文本重叠问题

debugcn 发表于 Dev

基里尔

在这种情况下如何避免标题文本重叠？又为什么对上半部分隐藏溢出而对下半部分可见溢出？

body {
  margin: 0;
}

section.hero {
  position: relative;
  height: 100vh;
  overflow:hidden;
}

section.hero h1 {
  display: block;
  position: fixed;
  text-align: center;
  width: 100%;
  top: 50%;
}

section :first-child {
  margin-top: 0;
}

.bg1 {
  background: yellow;
}

.bg2 {
  background: cyan;
}

.bg3 {
  background: magenta;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Demo</title>
</head>

<body>
  <section class="hero bg1">
    <h1 class="hero-title">0</h1>
  </section>
  <section class="hero bg2">
    <h1 class="hero-title">1</h1>
  </section>
  <section class="hero bg3">
    <h1 class="hero-title">2</h1>
  </section>
</body>

</html>

陪同Afif

应用clip-path或mask隐藏position:fixed。溢出将不起作用position:fixed

body {
  margin: 0;
}

section.hero {
  position: relative;
  height: 100vh;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  /*OR
   -webkit-mask:linear-gradient(#fff,#fff);
           mask:linear-gradient(#fff,#fff);
  */
}

section.hero h1 {
  display: block;
  position: fixed;
  text-align: center;
  width: 100%;
  top: 50%;
}

section :first-child {
  margin-top: 0;
}

.bg1 {
  background: yellow;
}

.bg2 {
  background: cyan;
}

.bg3 {
  background: magenta;
}

<section class="hero bg1">
  <h1 class="hero-title">0</h1>
</section>
<section class="hero bg2">
  <h1 class="hero-title">1</h1>
</section>
<section class="hero bg3">
  <h1 class="hero-title">2</h1>
</section>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。