css2.1的一些深入了解（3）使用绝对定位模拟固定定位

写bug的小气球

于 2019-12-24 08:49:01 发布

阅读量140

点赞数

分类专栏：自学前端 web前端自学文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_46013619/article/details/103676788

版权

自学前端同时被 3 个专栏收录

42 篇文章

订阅专栏

web前端

36 篇文章

订阅专栏

自学

25 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html{
				/* 无论是html，还是body，
				如果只写一个overflow，是不会出现滚动条的，
				可以用overflow：scroll测试下 */
				overflow: hidden;
				/* 这里高度需要一层层继承下去，单独写一个高度不行 */
				height: 100%; 
				
			}
			
			body{
				/* 这里的滚动条是body的，所以初始包含块不会动，只有html能找到初始包含块 */
				overflow: auto;
				height: 100%;
			}
			
			#test{
				/* 它动了，是因为初始包含块动了，
				它参照初始包含块，
				所以想跟flex一样，就要想办法让初始包含块不动 */
				position: absolute;
				left: 50px;
				top: 50px;
				width: 100px;
				height: 100px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="test">
			
		</div>
		<div style="height: 1000px;">
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
			csjkahcjk <br />
		</div>
	</body>
</html>