css的position属性

最新推荐文章于 2024-02-19 14:10:48 发布

BigDevil_

最新推荐文章于 2024-02-19 14:10:48 发布

阅读量185

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/BigDevil_/article/details/103108575

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

标题position的三个属性：

直接上案例：
正常页面应该是：
在这里插入图片描述

absolute：绝对位置；相对于整个页面，固定其位置，滚动条移动他也会动

设置“这是带有绝对定位的标题”的position属性为absolute
position:absolute;
left: 100px;
top: 150px;

显示页面：
没有滑动滚动条的状态
滑动滚动条后:他随着滚动条一起滚动
滑动滚动条后的absolute

fixed：绝对位置；相对于浏览器页面，悬浮

设置“这是带有绝对定位的标题”的position属性为fixed
position:fixed;
left: 100px;
top: 150px;

页面如下
滑动滚动条之后：他位置相对于浏览器窗口没有变，像悬浮在桌面上
relative：相对位置；相对于其正常位置

源码

<html>
	<head>
		<style type="text/css">
			h2.pos_abs {
				/* position: fixed; */
				/* 相当于悬浮在桌面，固定在浏览器桌面的位置 */
				
				/* position:absolute; */
				/* 相对于整个页面 ，固定其位置，滚动条移动他也会动 */
				
				/* position:relative; */
				/* 生成相对位置，相对于他默认正常的位置 */
				left: 100px;
				top: 150px
			}

			#div1 {
				height: 500px;
				width: 500px;
				border: 2px solid red;
				background-color: yellowgreen;
				overflow: auto;
				margin-left: 100px;
			}
		</style>
	</head>

	<body>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		<div id="div1">
			<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
			<h2 class="pos_abs">这是带有绝对定位的标题</h2>
			<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
		</div>

	</body>

</html>

BigDevil_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的position属性

标题position的三个属性：直接上案例：正常页面应该是：absolute：绝对位置；相对于整个页面，固定其位置，滚动条移动他也会动设置“这是带有绝对定位的标题”的position属性为absoluteposition:absolute;left: 100px;top: 150px;显示页面：滑动滚动条后:他随着滚动条一起滚动fixed：绝对位置；相对...
复制链接

扫一扫

专栏目录