在这种情况下如何避免标题文本重叠？ 为什么溢出对于上面的部分隐藏而对于下面的部分可见？
演示:https://jsfiddle.net/sftrq1hv/
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>最佳答案
应用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>关于html - CSS "position:fixed"滚动文本重叠问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61021080/