CSS 定位(position)

最新推荐文章于 2022-11-14 13:45:44 发布

_wjl_

最新推荐文章于 2022-11-14 13:45:44 发布

阅读量182

点赞数

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

定位(position)

如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。
PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定位属性</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		top: 50px; /*  边偏移 */
		left: 100px;
		position: absolute;  /* 定位模式（绝对定位） */
		/* 定位模式 + 边偏移 = 完整定位 */
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。

上面的话翻译成白话：就是网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS：静态定位其实没啥可说的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>静态定位</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
		position: static; /*  定位模式 ---静态定位 */
		left: 100px;
		top: 50px;
		/* 静态定位---对边偏移无效的 
		一般用来 清除定位的 一个原来有定位的盒子 不想加定位了 就可以设置为static */
	}
	</style>
</head>
   <body>
   <div></div>	
   </body>
</html>

相对定位relative(自恋型)

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：
在这里插入图片描述
注意：相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。

就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相对定位</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: pink;
	}
	div:nth-child(2) {
		background-color: purple;
		position: relative; /* 相对定位 */
		left: 50px;
		top: 50px;
	}
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
</body>
</html>

在这里插入图片描述

绝对定位absolute (拼爹型)

[注意] 如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位是脱标的</title>
	<style>
	div:first-child {
		width: 100px;
		height: 100px;
		background-color: pink;
		position: absolute;  /* 定位模式 绝对定位 */
		top: 50px;
		left: 50px;
		/* 绝对定位完全脱标的 它不占有位置 */
	}
	div:last-child {
		width: 200px;
		height: 200px;
		background-color: purple;
	}
	</style>
</head>
<body>
	<div></div>
	<div></div>
</body>
</html>

在这里插入图片描述

父级没有定位

若所有父元素都没有定位，以浏览器为准对齐(document文档)。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父级没有定位</title>
	<style>
	.father {
		width: 300px;
		height: 300px;
		background-color: pink;
		margin: 100px;
	}
	.son {
		width: 100px;
		height: 100px;
		background-color: purple;
		position: absolute;
		top: 15px;
		left: 15px;
		/* 绝对定位 父亲没有定位 孩子以浏览器为基准点对齐 */
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">掌握核心科技</div>
	</div>
</body>
</html>

在这里插入图片描述

父级有定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父级有定位</title>
	<style>
	.father {
		width: 300px;
		height: 300px;
		background-color: pink;
		margin: 100px;
		position: relative; /* 父级有定位 则以父亲为基准点对齐 */
	}
	.son {
		width: 100px;
		height: 100px;
		background-color: purple;
		position: absolute;
		top: 20px;
		left: 20px;
		/* 绝对定位 父亲没有定位 孩子以浏览器为基准点对齐 */
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">掌握核心科技</div>
	</div>
</body>
</html>

在这里插入图片描述

绝对定位的盒子没有边偏移

如果只是给盒子指定了定位，但是没有给与边偏移，则改盒子以标准流来显示排序，和上一个盒子的底边对齐，但是不占有位置。
在这里插入图片描述

子绝父相

这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。

这句话的意思是子级是绝对定位的话，父级要用相对定位。

首先，我们说下，绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。

就是说，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

但是，在我们网页布局的时候，最常说的子绝父相是怎么来的呢？请看如下图：
在这里插入图片描述
草图就是如下：

所以，我们可以得出如下结论：

因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是相对定位.

这就是子绝父相的由来。

_wjl_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 定位(position)

定位(position)如果，说浮动，关键在一个 “浮” 字上面，那么我们的定位，关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1、边偏移边偏移属性描...
复制链接

扫一扫

专栏目录