css遇到的问题大汇总

最新推荐文章于 2023-04-12 15:40:15 发布

原创最新推荐文章于 2023-04-12 15:40:15 发布 · 537 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #z-index #position:sticky

css 专栏收录该内容

2 篇文章

订阅专栏

博主总结前端学习笔记，汇总CSS遇到的问题。主要涉及z-index层级问题和css粘性定位position:sticky问题采坑，并给出相关参考链接，后续还会持续添加内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css遇到的问题大汇总

摘要

把之前自己的学习笔记总结一下，以后也会持续添加！
学习工作前端好几年了，感觉自己就是个废柴，很多都不懂，平时就是写写业务代码，用到的时候才会想着去学习，是时候要学习了。中午刚写了一篇博客，下午就看到自己的小伙伴写博客写了好几年了，比自己优秀的人都这么努力，自己还有什么理由不努力呢！加油！

1、z-index层级问题

http://www.cssass.com/blog/2009/75.html

2、css粘性定位position：sticky问题采坑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
            margin: 0;
            padding: 0
        }
        
        html body {
            height: 100vh;
            width: 100%
        }
        
        h1 {
            height: 200px;
            position: relative;
            background-color: lightblue;
        }
        
        h1:after {
            content: '';
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: red;
        }
        .sticky{
			position: relative;
			height: 300px;
		}
        #sticky-nav {
            position: sticky;
            /*position: absolute;*
            left: 0;*/
            top: 100px;
            width: 100%;
            height: 80px;
            background-color: yellowgreen;
        }
        
        .scroll-container {
            height: 600px;
            width: 100%;
            background-color: lightgrey;
        }
		</style>
	</head>
	<body>
		<h1>高200px;距顶部100px</h1>
		<div class="sticky">
			<div id="sticky-nav">这是一个tab切换栏，给sticky定位top=100px</div>
		</div>
		<p class="scroll-container">发生滚动</p>
		<p class="scroll-container" style="background:lightgoldenrodyellow;">发生滚动</p>
	</body>
</html>

参考链接：https://blog.youkuaiyun.com/qq_35585701/article/details/81040901