CSS的基本使用----定位属性

最新推荐文章于 2024-07-25 10:45:42 发布

godchicken

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量115

点赞数

分类专栏：前端小基础文章标签： css

本文链接：https://blog.csdn.net/weixin_42026631/article/details/106784236

版权

前端小基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、position定位

position属性是指定一个元素（静态，相对，绝对）的定位方法的类型
在这里插入图片描述

先看看原来的
在这里插入图片描述

1.相对定位

position=relative

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style type="text/css">
			div {
				width: 12.5rem;
				height: 12.5rem;
			}
			#box1 {
				background: #0000FF;
			}
			#box2{
				background: #00FF00;
				position: relative;
				/* 表示相对原来位置移动，原来的物理位置仍然占有，下面的top、left、right、bottom都表示相对原来的 */
				top: 12.5rem;		
				left: 200px;
			}
			#box3{
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		<div id="box3">
			
		</div>
	</body>
</html>

在这里插入图片描述
可以看到绿色的跑了红色右边并且原来位置还在那

2、绝对定位

position=absolute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style type="text/css">
			div {
				width: 12.5rem;
				height: 12.5rem;
			}
			#box1 {
				background: #0000FF;
			}
			#box2{
				background: #00FF00;
				
				/* 绝对定位：绝对定位不会占据原有的物理位置
					绝对定位的参考点是（0,0）点，也就是浏览器右上角
				 */
				position: absolute;
				left: 12.5rem;
				top: 200px;
			}
			#box3{
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
		<div id="box3">
			
		</div>
	</body>
</html>

在这里插入图片描述
是不是发现红色顶替了绿色的位置，但是绿色没对齐（是因为body也有边框，而绝对定位是参照浏览器的左上角（0,0）点开始算）

如果元素的外层（父元素、爷爷元素）有了除默认值position意外的属性，则元素的绝对定位参考点是他父元素（爷爷元素）的左上角，即是他距离他外层元素最近的设定过position属性父类元素的左上角作为参考点。

总结绝对定位：就是找他距离最近的设置了position父类元素的左上角作为参考点，若都没有则参考浏览器左上角。

固定定位

position=flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style type="text/css">
			body {
				height: 20000px;
				background: #00FF00;
			}
			div {
				width: 12.5rem;
				height: 12.5rem;
			}
			#box1 {
				background: #0000FF;
				position: fixed;
			}
			
		</style>
	</head>
	<body>
		<div id="box1">
			
		</div>

	</body>
</html>

在这里插入图片描述
无论滚动条怎么滚永远在那里

4.产生的问题：定位元素的显示顺序

使用z-index,z-index只对采用position属性产生作用

z-index:1-n

数字越小越在前，同级看代码先后顺序

godchicken

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本使用----定位属性

1、position定位position属性是指定一个元素（静态，相对，绝对）的定位方法的类型先看看原来的1.相对定位position=relative<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>相对定位</title> <style type="text/css"> div { width: 12.5rem
复制链接

扫一扫

专栏目录