<!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>
</style>
</head>
<body>
<!--
什么是定位？
定位能够让我们把一个元素从他原本在正常布局流中应该在的位置移动到另一个位置
（自由的在某个盒子内移动位置 或者固定在屏幕中的某个位置）
实现定位：
边偏移量
top 设置距离：包含块距离顶部的距离
bottom 设置距离：包含块距离底部的距离
right 设置距离：包含块距离右部的距离
left 设置距离：包含块距离左部的距离
css显示模式？普通文档流：块级元素垂直排列，行内元素水平排列
让两个块级元素水平排列：①转行内块级元素
②浮动
相对定位：
position:relative;
相对于元素本身的位置发生移动
相对于元素在正常文档流中的位置移动它，把一个正常布局流中的元素从它默认位置按照坐标进行相对移动
它原本所占空间不会改变
基础特性：
①不脱离文档流
②提升层级
③不定义边偏移量对元素基本没有影响
使用场景：、
一般作为定位父级使用，配合绝对定位
-->
<!--
绝对定位：
语法：position:absolute;
相对于【定位父级】进行定位，如果没有定位父级，他会一层一层往上找，一直找到body【浏览器窗口】。
有定位父级的话，相对于最近的定位父级进行定位。
基础特性：
①脱离文档流
②提升层级
使用场景：通常配合相对定位使用（父相子绝），分页，翻页，视频VIP标志
-->
<!--
固定定位：
语法：position:fixed;
元素的位置相对于浏览器的窗口进行固定，即使窗口是滚动的它也不会移动
基本特性：
①提升元素层级
②脱离文档流
使用场景：滚动的导航，侧边栏，弹窗
-->
<!--
静态定位：
语法：position:static;
表示将元素放在文档流的默认位置，HTML元素的默认值。即使没有定位，遵循正常的文档流布局
静态定位的元素不会受到边偏移量的影响
使用场景：重置定位属性
-->
<!--
定位的层级顺序
z-index:
-->
<!--
盒子的居中方法
-->
</body>
</html>
110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
