# 定位

position 属性指定了元素的定位类型。

position 属性的五个值：

static
relative
fixed
absolute
sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

# static 静态定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

# relative 相对定位

relative 表示，相对于默认位置（即 static 时的位置）进行偏移，即相对定位的基点是元素默认位置。对象遵循常规文档流。

<div class="app"></div>

.app {
  position: relative;
  top: -50px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: yellow;
}

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

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

# absolute 绝对定位

absolute 表示，相对于最近一个position值不为static的祖先元素进行定位，如果没有定位的祖先元素，则一直回溯到 html 元素。对象脱离文档流。

<div class="parent">
    <div>absolute 定位使元素的位置与文档流无关，因此不占据空间。</div>
    <div>absolute 定位的元素和其他元素重叠。</div>
    <div class="children"></div>
</div>

.parent {
  position: relative;
  width: 100%;
  height: 500px;
  border: 1px solid black;
}

.children {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: lavender;
}

absolute 绝对定位使元素的位置与文档流无关(脱离文档流)，因此不占据空间。

absolute 绝对定位的元素和其他元素重叠。

# fixed 固定定位

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

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

<div class="fixedCon">
  <div class="fixed"></div>
</div>

.fixedCon {
  position: relative;
  width: 100%;
  height: 10000px;
  background-color: pink;
}

.fixed {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
  height: 100px;
  background-color: #000;
}

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

# sticky 属性值

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。

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

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right,bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit-sticky (查看以下实例)。

<div class="stickyCon">
  <div class="sticky"></div>
</div>

.stickyCon {
  position: relative;
  width: 100%;
  height: 10000px;
  background-color: lavenderblush;
}

.sticky {
  position: sticky;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

# 定位属性

定位属性只会在 position 值为非 static 的元素生效。

# top

定义了元素的上外边距边界与其包含块上边界之间的偏移

auto：默认值。通过浏览器计算上边缘的位置。
%：设置以包含元素的百分比计的上边位置。可使用负值。
length：使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit：规定应该从父元素继承 top 属性的值。

# bottom

定义了元素的底外边距边界与其包含块底边界之间的偏移

auto：默认值。通过浏览器计算底部的位置。
%：设置以包含元素的百分比计的底边位置。可使用负值。
length：使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit：规定应该从父元素继承 bottom 属性的值。

# left

定义了元素的左外边距边界与其包含块左边界之间的偏移

auto：默认值。通过浏览器计算左边缘的位置。
%：设置以包含元素的百分比计的左边位置。可使用负值。
length：使用 px、cm 等单位设置元素的左边位置。可使用负值。
inherit：规定应该从父元素继承 left 属性的值。

# right

定义了元素的右外边距边界与其包含块右边界之间的偏移

auto：默认值。通过浏览器计算右边缘的位置。
%：设置以包含元素的百分比计的右边位置。可使用负值。
length：使用 px、cm 等单位设置元素的左边位置。可使用负值。
inherit：规定应该从父元素继承 right 属性的值。

<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: lavender;
}

.box1 {
  position: absolute;
  bottom: 50px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: lavender;
}

/*如果同时设置了top和bottom | left和right*/
/*情况一：如果盒子的宽度和高度确定了，那么会忽略bottom | right*/
.box2 {
  position: absolute;
  top: 150px;
  bottom: 150px;
  left: 80px;
  right: 80px;
  width: 100px;
  height: 100px;
  background-color: lavender;
}

/*情况二；如果盒子的宽度或者高度未指明，那么盒子的宽度或者高度就会拉到同时满足 top 和 bottom | left 和 right的条件。*/
.box3 {
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 60px;
  right: 60px;
  background-color: lavender;
}

# 重叠的元素 z-index

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

该属性设置一个定位元素(position 为非 static)沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

# 属性值设置

auto：默认。堆叠顺序与父元素相等。
number：设置元素的堆叠顺序。
inherit：规定应该从父元素继承 z-index 属性的值。

默认下，后面元素覆盖在前面元素之上，想要改变堆叠顺序问题，就设置z-index, 谁z-index的值大就在上面

# 层级关系

# 层叠上下文（background/border） < ( z-index 小于 0 ) < block块级盒子 < float浮动盒子 < inline / inline-block 盒子 < z-index:auto / z-index: 0 < z-index 大于 0

1.设置了定位的元素的层级高于普通的block盒子或者inline-block
2.如果都设置了z-index, 则谁的z-index值越大，层级越高
3.如果父级的z-index较高，那么所有的子级元素都比父级元素低的元素层级高
4.z-index 可以设置负值

# 层叠上下文

# 产生条件

1.根元素（默认创建层叠上下文，只有 HTML 根元素，这里你可以理解为 body 标签。它属于根层叠上下文元素，不需要任何 CSS 属性来触发。）
2.设置z-index 不为auto时
3.其他css属性，例如：opcity不为1时候 transfrom等

# clip 剪辑一个绝对定位的元素

剪辑一个绝对定位的元素

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"> 
  <title></title> 
  <style>
    img {
      position:absolute;
      clip:rect(0px,60px,200px,0px);
    }
  </style>
  </head>
  <body>
    <img src="../img/lufei.jpg" alt="路飞">
  </body>
</html>

# cursor 定义光标形状

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"> 
  <title></title> 
  </head>
  <body>
    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
    <span style="cursor:auto">auto</span><br>
    <span style="cursor:crosshair">crosshair</span><br>
    <span style="cursor:default">default</span><br>
    <span style="cursor:e-resize">e-resize</span><br>
    <span style="cursor:help">help</span><br>
    <span style="cursor:move">move</span><br>
    <span style="cursor:n-resize">n-resize</span><br>
    <span style="cursor:ne-resize">ne-resize</span><br>
    <span style="cursor:nw-resize">nw-resize</span><br>
    <span style="cursor:pointer">pointer</span><br>
    <span style="cursor:progress">progress</span><br>
    <span style="cursor:s-resize">s-resize</span><br>
    <span style="cursor:se-resize">se-resize</span><br>
    <span style="cursor:sw-resize">sw-resize</span><br>
    <span style="cursor:text">text</span><br>
    <span style="cursor:w-resize">w-resize</span><br>
    <span style="cursor:wait">wait</span><br>
  </body>
</html>

# overflow 属性

设置当元素的内容溢出其区域时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.ex1 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: scroll;
}

div.ex2 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: hidden;
}

div.ex3 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: auto;
}

div.ex4 {
    background-color: lightblue;
    width: 110px;
    height: 110px;
    overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<h2>overflow: scroll:</h2>
<div class="ex1"> -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！</div>

<h2>overflow: hidden:</h2>
<div class="ex2"> -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！</div>

<h2>overflow: auto:</h2>
<div class="ex3"> -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！</div>

<h2>overflow: visible (默认):</h2>
<div class="ex4"> -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！ -- 学的不仅是技术，更是梦想！！！</div>

</body>
</html>

← CSS 盒子模型浮动 →