CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记

最新推荐文章于 2024-05-17 21:20:19 发布

海面有风

最新推荐文章于 2024-05-17 21:20:19 发布

阅读量1.6k

点赞数 2

分类专栏： css笔记文章标签： css 定位 1024程序员节

本文链接：https://blog.csdn.net/weixin_44659458/article/details/108864229

版权

css笔记专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、static定位

没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。

.static {
     position: static;/*默认*/
     width: 100px;
     height: 100px;
     border: 3px solid #73AD21;
     }

二、相对定位

相对该元素原本文档流的位置进行定位，且原本的位置保留。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.box1,.box2,.box3{
				display: flex;
         	    align-items: center;
         	    justify-content: center;
			}
		.box1 {
          width: 100px;
          height: 100px;
          border: 1px solid #73AD21;
         }
         .box2{
         	position: relative;/*相对定位*/
         	width: 100px;
            height: 100px;	
            border: 1px solid yellow;
            top: 100px;
            left: 100px;
         }
         .box3{
         	width: 100px;
            height: 100px;	
            border: 1px solid green;
            
         }
        
		</style>
	</head>
	<body>
		<div class="box1">盒子一</div>
		<div class="box2">盒子二</div>
		<div class="box3">盒子三</div>
	</body>
</html>

在这里插入图片描述
如果说：将盒子二的定位模式改为默认

很明显，相对定位是相对于原本文档流的位置进行定位的，且原有位置是保留的，其他元素无法占用。至于具体定位规则在下面会具体解释。

三、绝对定位

绝对定位是相对于父组件(前提是该组件是相对、绝对、固定定位的)，如果父组件不是相对定位的，则继续向上找，直到找到顶级组件(浏览器)进行定位。且父组件位于那一层，则子组件就位于那一层。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>绝对定位</title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				border: 1px solid red;
			}
			.box2{
				position: relative;/*相对定位*/
				width: 300px;
				height: 300px;
				border: 1px solid yellow;
				top: 50px;
				left: 50px;
			}
			.box3{
				position: absolute;/*绝对定位*/
				width: 200px;
				height: 200px;
				border: 1px solid green;
				top: 50px;
				left: 50px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">//父组件
				<div class="box3">//子组件
					
				</div>
			</div>
		</div>
	</body>
</html>

根据规则，box2是box3的父组件，所以定位是相对于box2进行定位的。
在这里插入图片描述

如果说：把box1作为box3的父组件时(box1为相对定位,box3为绝对定位,box2为默认)。为了效果更明显，box2设置外边框为50px，其他条件不变

在这里插入图片描述

很明显：是相对于box1进行定位的。

如果说找不到对应的父组件时，父组件为浏览器
在这里插入图片描述

解释：父组件位于那一层，则子组件就位于那一层

		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.box2{
                position: relative;
				width: 300px;
				height: 300px;
	            background-color: yellow;
				top: 50px;
				left: 50px;
				z-index: -1;/*层数*/
				
			}
			.box3{
				position: absolute;
				width: 200px;
				height: 200px;
				top: 50px;
				left: 50px;
				background-color: green;	
			}
		</style>
		
		<div class="box1">
			<div class="box2">
				<div class="box3">
					
				</div>
			</div>
		</div>

在这里插入图片描述
box3的背景颜色很明显没有显示出来，因为其父组件在-1层。而box1默认在第0层所以显示不了。改变子组件的层数也是一样的。

此时应该修改父组件的层数使其超过上一个盒子的层数

在这里插入图片描述

四、固定定位

参照物是浏览器，且原有位置(文档流位置)被消除,其他元素会忽略它的存在。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				position: fixed;
				width: 100%;
				height: 20px;
				background-color: yellowgreen;
				top: 100px;
				left: 10px;
			}
			
		</style>
	</head>
	<body>
		<div class="box"></div>	
	</body>
</html>

五、sticky定位

该定位是介于相对定位和绝对定位之间

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div.sticky {
				position: sticky;
				top: 0;
				/*阈值*/
				padding: 5px;
				background-color: #cae8ca;
				border: 2px solid #4CAF50;
			}
		</style>
	</head>

	<body>

		<p>顶部</p>
		<div class="sticky">我是粘性定位!</div>
		<div style="padding-bottom:2000px">
			<p>滚动我</p>
			<p>来回滚动我</p>
			<p>滚动我</p>
			<p>来回滚动我</p>
			<p>滚动我</p>
			<p>来回滚动我</p>
		</div>

	</body>

</html>

超过阈值时
在这里插入图片描述

六、定位规则

步骤一：选定参照物

相对定位:文档流
绝对定位:处在浮游层的父组件
固定定位:浏览器

步骤二：选取参考点(一般通过本身元素查找)

举例(绝对定位)：

<head>
		<meta charset="utf-8" />
		<title>绝对定位</title>
		<style>
			.box1{/*父组件*/
				position: relative;
				width: 400px;
				height: 400px;
				border: 1px solid red;
			}
			.box2{
				width: 300px;
				height: 300px;
				border: 1px solid yellow;
				margin: 50px;	
			}
			.box3{/*子组件*/
				position: absolute;
				width: 200px;
				height: 200px;
				border: 1px solid green;
								/*
				 * 通过下面可得参照点是父组件的左上角
				 * 找到父组件的左上角后，
				 * 如果值是负的，则沿父组件对应边的反方向运动对应距离，正则相反。
				 * (比如top:50px;left: 50px;)
				 * 已知参照点为左上角，因为是top,且该值为正，故沿边方向移动（向下）移动50px
				 * left，向右移动50px。
				 * 此时，做延长线，相交点即为子组件的左上角，然后通过子组件的width,height绘制。
				 */
				top: 50px;/*上*/
				left: 50px;/*左*/
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="box3">
					
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
其他的定位方法都一样的，只要找对参照物及参照点及可。

注意：
上面的第二部分相对定位中，看图片很明显，第二个盒子的一条边与第三个盒子的边右重叠，这是因为盒子我定义了有边框为1px,所以实际的盒子长度要加上边框的长度。

欢迎访问我的个人博客

海面有风

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记

一、static定位没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。.static { position: static;/*默认*/ width: 100px; height: 100px; border: 3px solid #73AD21; }二、相对定位相对该元素原本文档流的位置进行定位，且原本的位置保留。<!DOCTYPE html><html> <hea
复制链接

扫一扫