定位
在 CSS 中，定位（Positioning）是一种控制元素在网页中布局的方法，可以通过设置元素的定位属性来决定元素在文档流中的位置。CSS 提供了四种主要的定位方式，它们分别是 static、relative、absolute 和 fixed。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
.content{
/*
定位：static/relative/absolute/fixed
偏移量：top/left/bottom/right 10px，如果想取消已经设置的偏移量，则可以将值设为 unset
设置定位后，元素的位置不会有任何变化，必须在设置偏移量之后才会变化
跟浮动一样，元素在设置了定位以后，会自动转换为行内块元素；
即如果行内元素被设置了浮动，此时不需要给元素设置为 inline-block，元素就会有宽高。
而如果 div 被设置了浮动，就不会占一行了，而是会根据里面内容自动调整宽度，如果里面没内容，div 不会显示出来。
*/
/* 默认 static，所以当想要取消 relative/absolute 定位的时候，就可以设置为 static */
position: static;
/* 相对定位：*/
/* 保留位置，脱标，浮动在标准流上方 */
position: relative; /* 相对定位，相对于盒子原来的位置，元素偏移某个距离，但仍然保留其原本占的空间；相对定位元素经常被用来作为绝对定位元素的容器块 */
top: 50px; /* 相对于原来的位置，距上边50px */
left: 30px; /* 相对于原来的位置，距左边30px */
bottom: 20px; /* 相对于原来的位置，距下边20px */
right: 10px; /* 相对于原来的位置，距右边10px */
/* 绝对定位：如果没有父亲或父亲没有定位，则相对于浏览器做绝对定位 */
/* 不保留位置，完全脱标 */
position: absolute; /* 绝对定位，元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框 */
top: 50px; /* 相对于父盒子原来的位置，距父盒子上边 50px。ps：如果父盒子没有设置 position 属性或没有父盒子，就相对于整个页面做移动 */
left: 30px; /* 相对于父盒子原来的位置，距父盒子左边 30px。ps：如果父盒子没有设置 position 属性或没有父盒子，就相对于整个页面做移动 */
bottom: 20px;
right: 10px;
/* 固定定位（相对于整个页面）：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身（不管父元素有没有定位）*/
/* 不保留位置，完全脱标 */
position: fixed;
/* 定位的层叠顺序：Z 代表 Z 轴的意思 */
/* 如果并列的几个盒子都设置了定位，那么在不设置 z-index 的情况下，默认最后一个盒子在最上面 */
z-index:1; /* 盒子显示的层叠顺序，值默认为 0，可以为正数也可以为负数，值大的，就显示在上方；只有相对定位、绝对定位、固定定位有此属性，其余静态定位、标准流、浮动都无此属性 */
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
