介绍
定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
有许多不同类型的定位，你可以对 HTML 元素生效。要使用特定类型的定位，我们使用position属性。
属性 position
语法：
position =
static |
relative |
absolute |
sticky |
fixed
取值
-
static：静态定位，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。默认值。 -
relative：相对定位。 -
absolute：绝对定位。 -
fixed：固定定位。 -
sticky：粘性定位。
属性 top、bottom、left、right
当
position设置为absolute或fixed时，`属性指定了定位元素各外边距边界与其包含块各边界之间的偏移。当
position设置为relative时，属性指定了元素的各边界离开其正常位置的偏移。-
当
position设置为sticky时- 如果元素在
viewport里面，属性的效果和position为relative等同； - 如果元素在
viewport外面，属性的效果和position为fixed等同。
- 如果元素在
当position设置为static时，属性无效。
注意：
- 1、非定位元素设置这些属性无效。
- 2、当
top和bottom同时指定时，并且height没有被指定或者指定为auto的时候，top和bottom都会生效，在其他情况下，如果height被限制，则top属性会优先设置，bottom属性则会被忽略。- 3、当
left和right同时指定时，元素的位置会被重复指定。当容器是从左到右时，left的值会被优先设定；当容器是从右到左时，right的值会被优先设定。
语法：
left | right | top | bottom =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
取值：
<length>：可以是负的，正的 或者null表示：<percentage>：代表元素包含块的宽度的百分比。-
auto：这个关键字表示：对于 绝对定位
absolute元素，元素将忽略此属性而以right属性为准，如果此时设置width: auto，将基于内容需要的宽度设置宽度；如果right也为auto的话，元素的水平位置就是它假如作为静态 (即 static) 元素时该在的位置。对于** 相对定位**
relative元素，元素相对正常位置的偏移量将基于right属性；如果right也为auto的话，元素将不会有偏移。
inherit：这个关键字表示该值与其父元素 (可能不是它的包含块) 的计算值相同。
静态定位 static
是每个元素属性positison属性的默认值。即，将元素放入它在文档布局流中的正常位置。是默认行为！
就不做过多的解释了。
相对定位 relative
它与静态定位非常相似，占据在正常的文档流中，需要使用top、bottom、left、right属性，来修改元素的位置。
示例：
HTML:
<div class="d1">
<p class="p1">I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p class="p2">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
</div>
CSS:
.d1{
width: 50%;
border: 2px solid black;
}
p{
margin: 10px;
border: 2px solid green;
}
.p1{
background-color: aqua;
position: relative;
top: 20px;
left: 10px;
bottom: 10px;
right: 10px;
}
.p2{
background-color: antiquewhite;
}
绝对定位 absolute
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
示例1：设置元素 为 绝对定位，未设置 left、right、top、bottom 。
HTML:
<div class="d1">
<p class="p1">I am a basic block level element. </p>
<p class="p2">By default we span 100% of the width of our parent element, </p>
<p class="p3">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
</div>
CSS:
.d1{
width: 50%;
border: 2px solid black;
}
p{
border: 2px solid green;
margin: 0px;
}
.p1{
background-color: aqua;
}
.p2{
background-color: antiquewhite;
position: absolute;
}
.p3{
background-color: blueviolet;
}
代码分析：
绝对定位的元素不再存在于正常文档布局流中，它坐在它自己的层独立于一切，有了 层级 的关系，自己创建了个单独的块级格式化上下文。
显示的位置是其原本的位置。
示例2：给 祖先元素全部是static定位 或 没有 祖先元素的 绝对定位元素 分别设置 left、right、top、bottom
CSS:
html{
border: 5px solid orange;
}
body{
width: 500px;
border: 5px solid red;
margin: 10px;
}
.d1{
width: 0 auto;
border: 5px solid black;
margin: 10px;
}
p{
border: 5px solid green;
margin: 0px;
}
.p1{
background-color: aqua;
}
.p2{
background-color: antiquewhite;
position: absolute;
left: 0px;
top: 0px;
}
.p3{
background-color: blueviolet;
}
.p2{
background-color: antiquewhite;
position: absolute;
right: 0px;
bottom: 0px;
}
代码分析：
- 如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在 初始块容器 中。这个初始块容器有着和浏览器视口一样的尺寸，并且
<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
示例3：当绝对定位的元素 的 祖先元素 有 非static定位，未设置 left、right、top、bottom 。
.d1{
width: 0 auto;
border: 5px solid black;
margin: 10px;
position: relative;
}
.p2{
background-color: antiquewhite;
position: absolute;
}
代码分析：跟
static时 一样。
示例4：当绝对定位的元素 的 祖先元素 有 非static定位，设置 left、right、top、bottom 。
.d1{
width: 0 auto;
border: 5px solid black;
margin: 10px;
position: relative;
}
.p2{
background-color: antiquewhite;
left: 0px;
top: 0px;
}
代码分析：祖先元素有
relative定位，那么绝对定位元素 则以最近一级的有定位祖先元素为参考点移动位置。
属性 z-index
当有很多的绝对定位元素开始重叠，那么什么来决定哪些元素出现在其他元素的顶部。这个时候需要用到属性z-index
z-index设定了一个定位元素及其后代元素的 或 flex 项目的z-order，当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。
语法：
z-index =
auto |
<integer> |
inherit
取值：
auto：在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同。盒子不会创建一个新的本地堆叠上下文。<integer>：是生成的盒子在当前堆叠上下文中的堆叠层级。
此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文。这意味着后代（元素）的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比。
固定定位 fixed
与绝对定位的工作方式几乎相同，但是，固定定位的元素则是相对于 浏览器视口本身。
示例：调整浏览器的窗口大小，并修改body的宽高。
body{
width: 800px;
height: 500px;
border: 5px solid red;
margin: 10px;
}
.p2{
background-color: antiquewhite;
position: fixed;
left: 0px;
top: 0px;
}
粘性定位 sticky
它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10 像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
sticky不脱离文档流。
示例：
.p2{
background-color: antiquewhite;
position: sticky;
left: 0px;
top: 0px;
}
