H5CSS3笔记-定位布局中的position属性

最新推荐文章于 2024-05-09 15:19:55 发布

tamakisakura

最新推荐文章于 2024-05-09 15:19:55 发布

阅读量1.7k

点赞数

分类专栏： HTML5CSS3

本文链接：https://blog.csdn.net/c87171399/article/details/80046547

版权

HTML5CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.position属性的意义：

position属性决定了元素将如何定位

通过top、right、bottom、left实现位置的改变。

2.position属性的可选参数：

·static: position属性中的默认值，元素按照标准流的方式进行正常排列。

·relative:生成相对定位的元素，相对于其正常位置（即正常文档流时候的位置）进行定位。

相对定位，仍然处于标准流中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>position</title>
		<style>
			.test{
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				right: 50px; /*向左移动了50px，向上移动了50px,和元素的原始右侧位置相对距离50px。*/
				bottom: 50px;
			}
			
		</style>
	</head>
	<body>
		<div class="test"></div>
	</body>
</html>

使得块级元素有了层的概念，后写元素会覆盖先写元素。

·absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素将会脱离正常的文档流。也有层级概念，后写元素覆盖先写元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>position</title>
		<style>
			*{
				margin: 0;   /*预先写公共样式，把所有带有边距的元素清除掉。*/
				padding: 0; /*这两句清楚了所有元素的边距了 ‘*’表示全部操作。 */
			}
			.test{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 50px; /*相对父级元素body左侧间隔50px，*/
				bottom: -50px;/*相对父级元素body下侧间隔-50，即把页面向下拉长了50px，如果position属性是fixed就不会拉长*/
				/*使得class=test的div脱离了文档流，所以html不存在div了，如果只存在这一个div，html的高度为0*/
			}
			.bro{
				width: 100px;
				height: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="bro"></div>
		<div class="test"></div>
	</body>
</html>

·fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>position</title>
		<style>
			*{
				margin: 0;   /*预先写公共样式，把所有带有边距的元素清除掉。*/
				padding: 0; /*这两句清楚了所有元素的边距了 ‘*’表示全部操作。 */
			}
			.test{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 50px;
				bottom: -50px;
				/*使得div脱离了文档流，所以html不存在div了，高度变为0*/
			}
			.bro{
				width: 100px;
				height: 100px;
				background: blue;
			}
			.per{ /*一开始和红色区块重合，但是滚轮移动使得浏览器拖到最底，依旧是只显示矩形的一半，所以是相对于浏览器显示窗口的位置来说的，永远处于底部并相对底部向下位移50px*/
				width: 100px;
				height: 100px;
				background: black;
				position: fixed;
				left: 50px;
				bottom: -50px;
				
				
			}
			
		    /*body{
		    	height: 3000px;
		    }*/
		</style>
	</head>
	<body>
		<div class="bro"></div>
		<div class="test"></div>
		<div class="per"></div>
	</body>
</html>

·inherit:规定应该从父元素继承 position 属性的值。

tamakisakura

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5CSS3笔记-定位布局中的position属性

1.position属性的意义：position属性决定了元素将如何定位通过top、right、bottom、left实现位置的改变。2.position属性的可选参数：·static: position属性中的默认值，元素按照标准流的方式进行正常排列。·relative:生成相对定位的元素，相对于其正常位置（即正常文档流时候的位置）进行定位。相对定位，仍然处于标准流中。&lt;!DOCTYPE...
复制链接

扫一扫