失眠网 > 【前端初学者】【CSS笔记】之定位：相对定位绝对定位固定定位静态定位及粘性定

【前端初学者】【CSS笔记】之定位：相对定位绝对定位固定定位静态定位及粘性定

时间：2023-10-07 18:35:44

（上篇）

一、相对定位（ relative ）

1.1 设置方式：

1.2相对定位元素定位的参考点：

1.3 相对定位的特点：

1.4 相对定位的举例：

二、绝对定位（ absolute ）

2.1 设置方式：

2.2 元素定位的参考点：

2.3 绝对定位的特点：

2.4 绝对定位的举例：

2.5 设置绝对定位元素在包含块中居中（水平与垂直）

三、固定定位（ fixed ）

3.1 设置方式：

3.2 元素定位的参考点：

3.3 固定定位的特点：

3.4 固定定位的举例：

3.5 设置固定定位元素在包含块中居中（水平与垂直）

一、相对定位（ relative ）

1.1 设置方式：

position:relative;

属性：top 、right 、bottom 、left

1.2相对定位元素定位的参考点：

① 相对定位元素的定位是相对其正常位置，自己没有定位前的位置；

② 移动相对定位元素，它原本所占的空间不会改变；

③ 相对定位元素经常被用来作为绝对定位元素的容器块。

1.3 相对定位的特点：

①不会脱离文档流；

② 布局中，相邻元素会参照相对定位元素原来的位置进行布局，可能造成位置重叠，定位元素显示在上；

③ 不改变原来的显示模式。

1.4 相对定位的举例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {width: 800px;height: 550px;background: pink;border: 5px dotted red;}.box {width: 300px;height: 150px;border: 5px dashed #bbb;margin: 10px;text-align: center;font-size: 50px;font-weight: 700;line-height: 150px;color: #fff;}.box1 {background: orange;}.box2 {background: yellow;}.box3 {background: green;}</style></head><body><div class="content"><div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div></div></body></html>

初始设置好三个盒子，现在对 box2 进行相对定位，改变如下：

.box2 {background: yellow;/* 相对定位，向上移动150px，向右移动200px */position: relative;top: -150px;left: 200px;}

结果：

二、绝对定位（ absolute ）

2.1 设置方式：

position:absolute;

属性：top 、right 、bottom 、left

2.2 元素定位的参考点：

① 绝对定位元素参照它的包含块进行定位；

② 绝对定位元素的包含块是第一个定位（任何定位都可以）的祖先元素（从下到上），如果没有

定位的祖先元素，包含块就是整个页面。

2.3 绝对定位的特点：

① 绝对定位元素会脱离文档流，显示在其他元素上面；

② 不论显示模式是行内、行内块、块级或者浮动，设置为绝对定位，就是绝对定位的元素，拥有自己的特点；

③绝对定位元素的显示特点：

Ⅰ.默认宽高被内容撑开，不存在外边距的合并和塌陷，左右外边距auto不会居中

Ⅱ.不会被父元素作为文本，可以设置宽高、内外边距

④使用百分比设置位置、大小都参照包含块；

⑤在没有设置固定宽高的前提下，同时设置left和right可以影响宽度，同时设置top和bottom可以影响高度。

2.4 绝对定位的举例：

同1.4初始设置好三个盒子，对 box3 进行绝对定位，改变如下：

.box3 {background: green;/* 绝对定位 */position: absolute;top: 100px;left: 100px;}

或者：

.box3 {background: green;/* 绝对定位 */position: absolute;top: 80px;right: 300px;}

2.5 设置绝对定位元素在包含块中居中（水平与垂直）

方案一：
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

方案二：
position: absolute;
left: 50%;
top: 50%;
margin-left: -总宽度/2;
margin-top: -总高度/2;

三、固定定位（ fixed ）

3.1 设置方式：

position:fixed;

属性：top 、right 、bottom 、left

3.2 元素定位的参考点：

① 元素的位置相对于浏览器窗口是固定位置。

② 即使窗口是滚动的它也不会移动：

3.3 固定定位的特点：

同 2.3 绝对定位的特点

① 固定定位元素会脱离文档流，显示在其他元素上面；

② 不论显示模式是行内、行内块、块级或者浮动，设置为固定定位，就是固定定位的元素，拥有自己的特点；

③固定定位元素的显示特点：

Ⅰ.默认宽高被内容撑开，不存在外边距的合并和塌陷，左右外边距auto不会居中

Ⅱ.不会被父元素作为文本，可以设置宽高、内外边距

④使用百分比设置位置、大小都参照包含块；

⑤在没有设置固定宽高的前提下，同时设置left和right可以影响宽度，同时设置top和bottom可以影响高度。

3.4 固定定位的举例：

代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.content {width: 800px;height: 900px;background: pink;border: 5px dotted red;}.box {width: 300px;height: 150px;border: 5px dashed #bbb;margin: 10px;text-align: center;font-size: 50px;font-weight: 700;line-height: 150px;color: #fff;}.box1 {background: orange;/* 固定定位，并设置居中 */position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.box2 {background: yellow;}.box3 {background: green;}</style></head><body><div class="content"><div class="box box1">box1</div><div class="box box2">box2</div><div class="box box3">box3</div></div></body></html>

结果：