CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

目录

1.定位布局

1.1.静态定位（ Static positioning）

简单代码实现：

- 1.2.什么是相对定位?（ Relative positioning ）

简单代码实现：

- 1.3.什么是绝对定位?（Absolute positioning）

- 绝对定位参考点

效果图：

-绝对定位水平居中

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

效果图：京东的网页

效果图：

- 1.6.z-index

效果图：

1.从父现象 

效果图：

1.定位布局

- 定位流分类

1.1.静态定位

1.2.相对定位

1.3.绝对定位

1.4.固定定位

1.5.粘滞定位

1.6.z-index

1.1.静态定位（ Static positioning）

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

position: static;

简单代码实现：

<!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>静态定位</title>
</head>
<body><div class="first">静态定位</div><div class="second">静态定位的相邻元素</div>
</body>
</html>
<style>.first{width: 100px;height: 100px;background-color: pink;/* 静态定位 */position: static;/* margin-bottom: 50px; */float: left;}.second{width: 50px;height: 50px;background-color: blue;float: left;}
</style>

- 1.2.什么是相对定位?（ Relative positioning ）

相对定位就是相对于自己以前在标准流中的位置来移动 position: relative; 使用top,right,bottom,left来控制

- 相对定位注意点

相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

在相对定位中同一个方向上的定位属性只能使用一个

由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

- 相对定位应用场景

用于对元素进行微调

配合后面学习的绝对定位来使用

简单代码实现：
<!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>
</head>
<body><div class="realtive"></div>
</body>
</html>
<style>.realtive{width: 100px;height: 100px;background-color: black;position: relative;/* 相对定位 结合top left right bottom来设置 */left: 100px;top: 100px;}
</style>

- 1.3.什么是绝对定位?（Absolute positioning）

绝对定位就是相对于body来定位 position: absolute;

- 绝对定位参考点

1.规律默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点。 2.1只要是这个绝对定位元素的祖先元素都可以 2.2指的定位流是指绝对定位/相对定位/固定定位 2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

-绝对定位注意点

1.绝对定位的元素是脱离标准流的 2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素 3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点 4.一个绝对定位的元素会忽略祖先元素的padding

- 绝对定位-子绝父相

相对定位弊端: 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面绝对定位弊端: 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化子绝父相子元素用绝对定位, 父元素用相对定位

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

效果图：

原因：脱离文档流，不在标准流中，所以蓝色的会去到它的上边

<!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>
</head>
<body><!-- 脱离文档流，不在标准流中的 --><!-- 只设置自身绝对定位时，元素会参照body(浏览视口区)来定位 --><!-- 结合相对定位使用 --><!-- 1.祖先元素（祖先相对，子孙绝对）2.就近原则：  当祖先元素中都有定位流（相对、固定、绝对），参考就近原则，直接父亲有相对定位时，一定会优先参照父亲定位当祖先元素只有一个相对定位时，则参照这仅有的一个定位来移动 父相子绝3.当祖先元素，如有祖先元素直接设置padding,则会忽略掉--><!-- 爷爷辈的 -->
<div class="grandfather"><!-- 父亲相对定位 --><div class="father"><!-- 子女绝对定位 --><div class="first">测试绝对定位</div><div class="second">第二个孩子</div></div>
</div></body>
</html>
<style>.grandfather{width: 800px;height: 800px;border: 2px solid yellow;margin-top: 80px;margin-left: 80px;/* position: relative; */}.father{width: 500px;height: 500px;border: 2px solid black;position: relative;margin-top: 100px;margin-left: 100px;}.first{width: 100px;height: 100px;background-color: red;position: absolute;top: 50px;}.second{width: 100px;height: 100px;background-color:pink;  }
</style>

这两个再交换位置后就是：

就近原则：当祖先元素中都有定位流（相对、固定、绝对），参考就近原则，直接父亲有相对定位时，一定会优先参照父亲定位当祖先元素只有一个相对定位时，则参照这仅有的一个定位来移动

当祖先元素（直接父级之外），如有祖先元素直接设置padding, 则忽略这个值，只需要关注自身绝对定位结合相对偏移即可

所以就是100px

-绝对定位水平居中

只需要设置绝对定位元素的left:50%; 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

<!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>
</head>
<body><div class="juedui"></div><br><br><br><br><br><div class="test"></div>
</body>
</html>
<style>.juedui{width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;margin-left: -50px;}.test{width: 100px;height: 100px;background-color: pink;margin: 0 auto;}
</style>

这也是水平居中的一种方式

- 1.4.固定定位（Fixed positioning）

1.什么是固定定位?

 position: fixed; 

固定定位和前面学习的背景关联方式很像, 背景定位可以让背景图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点:

1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

2.固定定位和绝对定位一样不区分行内/块级/行内块级
<!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>
</head>
<body><div class="juedui"></div><br><br><br><br><br><div class="test"></div><br><br><br><br><div class="fixed"></div><div class="test2"></div>
</body>
</html>
<style>.juedui{width: 100px;height: 100px;background-color: red;position: absolute;left: 50%;margin-left: -50px;}.test{width: 100px;height: 100px;background-color: pink;margin: 0 auto;}.fixed{width: 800px;height: 800px;background-color: black;position: fixed;opacity: 0;}.test2{width: 300px;height: 300px;background-color: green;}
</style>
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间

所以中间的黑色部分不占空间

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

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

设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上

移动（此时相当于fixed定位）。

设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：

父元素不能overflow:hidden或者overflow:auto属性。

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

sticky元素仅在其父元素内生效

效果图：京东的网页

在实际运用非常多：
<!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>粘滞定位</title>
</head>
<body><div class="father"><div class="son"></div><div class="son1"></div></div>
</body>
</html>
<style>.father{width: 800px;height: 600px;margin-top: 50px;margin-left: 300px;border: 2px solid black;position: relative;/* 滚动条 */overflow: scroll;}.son{width: 100px;height: 100px;margin-top: 100px;margin-left: 300px; margin-bottom: 50px;background-color:green;/* 粘滞定位 */position: sticky;top: 50px;}.son1{width: 100px;height: 600px;background-color: yellow;margin-left: 300px; }
</style>
效果图：

- 1.6.z-index

1.什么是z-index属性?

默认情况下所有的元素都有一个默认的z-index属性, 取值是0. z-index属性的作用是专门用于控制定位流元素的覆盖关系的

2.默认情况下定位流的元素会盖住标准流的元素

元素的层级结构显示：定位流>z-index值大的>普通流

3.默认情况下定位流的元素后面编写的会盖住前面编写的

4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面注意点:

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。

1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

<!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>
</head>
<body><div class="grandfather"><div class="father"></div></div><div class="grandfather"><div class="brother"></div></div></body>
</html>
<style>.father{width: 200px;height: 200px;background-color:green; /* 默认在定位流中（相对、绝对、固定），z-index的值谁大谁显示在上面 */position: relative;z-index: 1;}.brother{width: 100px;height: 100px;height: 100px;background-color: red;margin-top: -50px;position: absolute;z-index: 2;}
</style>

效果图：

若不设置：

则会变成：

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。

 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

<!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>
</head>
<body><!-- 前提所有设置z-index的属性必须在定位流中（定位流回显示在普通文件流上 --><!-- 当两个元素的父元素都没有设置z-index值得时候，子元素的z-index值发挥作用时，谁大谁在上 --><!-- 当两个父元素都设置了z-index值的时候，从父z-index值 --><div class="grandfather"><div class="brother1"></div></div><div class="grandfather1"><div class="brother2"></div></div></body>
</html>
<style>.grandfather{width: 300px;height: 300px;background-color: pink;position: relative;z-index: 3;}.grandfather1{width: 300px;height: 300px;background-color: rgb(192, 255, 220);position: relative;z-index: 4 ;}.brother1{width: 200px;height: 200px;background-color:green; /* 默认在定位流中（相对、绝对、固定），z-index的值谁大谁显示在上面 */position: relative;z-index: 2;}.brother2{width: 100px;height: 100px; height: 100px;background-color: red;margin-top: -50px;position: absolute;z-index: 4;}
</style>

效果图：

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位相关推荐

一键学会三种定位布局，相对定位、绝对定位、固定定位!
定位布局定位属性: position 作用: 指定元素的定位类型取值:static 默认不定位相对定位绝对定位固定定位相对定位关键字 position:relative 特点:相对不脱离文档流 ...
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
CSS布局相关知识（四）：定位（相对、绝对、固定、粘滞）、层级
一.定位 position 定位是什么: 定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置怎么设置定位: 使用position属性来设置定位,可选值: static 默认值,元素 ...
【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位（上）
目录 (上篇) 一.相对定位 ( relative ) 1.1 设置方式: 1.2 相对定位元素定位的参考点: 1.3 相对定位的特点: 1.4 相对定位的举例: 二.绝对定位( absolute ) ...
CSS元素的定位（相对定位、绝对定位、固定定位、粘滞定位）
目录元素的定位相对定位绝对定位固定定位粘滞定位绝对定位的布局元素的定位相对定位当元素的position属性值设置为relative时则开启了元素的相对定位. 相对定位的特点: 1.元 ...
HTMLCSS Day06 CSS定位布局
文章目录 1.定位布局 - 1.1.静态定位( Static positioning) - 1.2.什么是相对定位?( Relative positioning ) - 相对定位注意点 - 相对定位应 ...

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

1.定位布局

1.1.静态定位（ Static positioning）

简单代码实现：

- 1.2.什么是相对定位?（ Relative positioning ）

简单代码实现：

- 1.3.什么是绝对定位?（Absolute positioning）

- 绝对定位参考点

效果图：

-绝对定位水平居中

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

效果图：京东的网页

效果图：

- 1.6.z-index

效果图：

1.从父现象

效果图：

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位相关推荐

最新文章

热门文章

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

1.定位布局

1.1.静态定位（ Static positioning）

简单代码实现：

- 1.2.什么是相对定位?（ Relative positioning ）

简单代码实现：

- 1.3.什么是绝对定位?（Absolute positioning）

- 绝对定位参考点

效果图：

-绝对定位水平居中

- 1.4.固定定位（Fixed positioning）

- 1.5.粘滞定位（ Sticky positioning ）

position: sticky;

效果图：京东的网页

效果图：

- 1.6.z-index

效果图：

1.从父现象 ​

效果图：

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位相关推荐

最新文章

热门文章

1.从父现象