css定位元素

css绝对定位、粘性定位，z-index、浮动

什么是定位元素

定位元素的特点

定位元素（positioned element）

position值不为static的元素

也就是position值为relative、absolute、fixed的元素

inset: 0;
/* 等同于 `top: 0; right: 0; bottom: 0; left: 0;` */
inset: 1px 2px;
/* 等同于 `top: 1px; right: 2px; bottom: 1px; left: 2px;` */
inset: 1px 2px 3px;
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 2px;` */
inset: 1px 2px 3px 4px;
/* 等同于 `top: 1px; right: 2px; bottom: 3px; left: 4px;` */

一、绝对定位（很重要知识点很多）

定义：绝对定位会脱离标准流，变成一个脱标元素 absolute/fixed
当我们不设置t,r,b,l的时候，元素的位置在默认标准流的位置
当我们将元素设置成定位元素就会激活 l，r，t，b四个属性，绝对定位的参照位置是
- 定位参照对象是最邻近的定位祖先元素
- 如果找不到这样的祖先元素，参照对象是视口

1.1、子绝父相

在绝大数情况下，子元素的绝对定位都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置position: relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置position: absolute
- 简称为“子绝父相”

并不是必须子绝父相，只要保证父元素是定位元素就可以了

1.2、将position设置为absolute/fixed元素的特点,特性(一)

绝对定位元素还是按照标准流进行排布的
**不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)**的很多特性都会消失
宽高默认由内容决定
可以随意设置宽高
脱标之后，不再受标准流的约束，不再严格按照从上到下、从左到右排布
不再给父元素汇报宽高数据
- 父元素没有设置宽高的的话，父元素可能就会看不见，无论父元素是不是相对定位
绝对定位元素进行定位是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，则相对于根元素，定位属性初始值都是auto，所以在未定位时是在初始位置

1.2、绝对定位元素的特点,特性(二)

1.2.1、对于绝对定位元素来说的left + right + margin-left + margin-right + width

定位参照对象的宽度 = left + right + margin-left + margin-right + width绝对定位元素的实际占用宽度

当绝对定位元素没有设置宽度的时候就是width：auto，l0,r0的时候: 因为设置绝对定位的时候，元素就不在严格区分inline，block，inline-block宽高都是由元素内容决定的magin和padding也会变成0，就变成

w0+r0+l0+0+0

这样的话宽度就等于父元素的宽度，

当绝对定位元素有设置宽度的时候l0,r0的时候: 按照上边特性计算最后width会按照你定义的宽度进行显示，但是 l0,r0不会起作用浏览器判断不了，因为这个时候magin是0，需要设置margin: auto 交给浏览器自动分配就会变成

width+r0+l0+auto+auto

，这样就会居中显示

应用场景：当我们需要覆盖父级元素的时候，我们一般会用t,r,b,l都设置为0，来决定当前元素的大小,下面有写**#1.2.2**
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + width绝对定位元素的实际占用高度

和上面的一样，这样设置的居中是一定精准的

1.2.2、如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性

left: 0、right: 0、top: 0、bottom: 0、margin: auto
- 另外，还得设置具体的宽高值（宽高小于定位参照对象的宽高）

1.2.3、auto到底是什么?

800 = 200 + ml0 + mr0 + 0 + 0
auto -> 交给浏览器你来处理
width: auto;

行内非替换元素 -> width: 包裹内容
块级元素 ->width: 包含块的宽度
绝对定位元素 -> width: 包裹内容

1.2.4、绝对定位注意事项：

当设置一个属性为绝对定位的时候，不设置l,t,b,r的时候所在的位置是auto由浏览器决定的，一般为置存在原来的位置

二、fixed特点

使用 fixed 进行布局的元素，

在一般情况下会相对于屏幕视窗来进行定位。

但是如果父元素的 transform, perspective 或 filter 属性不为 none 时

，position为fixed 的元素就会相对于父元素来进行定位。

三、粘性定位 - sticky

sticky是一个大家期待已久的属性;

可以看做是相对定位和固定(绝对)定位的结合体;

粘性定位的元素表现得像相对定位一样，直到它滚动到某个阈值点;

当达到这个阈值点时, 就会变成固定(绝对)定位;

position: sticky，比起其他定位值要新一些.可用在canuse.com查看浏览器兼容性

3.1、粘性定位效果传统js做法

一般这样的场景我们会将元素色湖之为relative，js会监听滚动事件当滚动到指定的位置的时候，我们会将relative替换成fixed

3.2、sticky的使用

/*将元素设置为粘性布局*/
position: sticky;
/*当通过元素滚动的时候会改变元素距离top的距离，当滚动距离top为0的时候
就会粘贴到top=0的位置上面，r,l,b都是一样的
*/
top: 0;

◼ sticky是相对于最近的定位祖先包含滚动视口的(the nearest ancestor scroll container’s scrollport )

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

四、position值对比

	脱离标准流	定位元素	绝对定位元素	定位参照对象
static-静态定位	×	×	×	×
relatve-相对定位	×	√	×	元素自己原来的位置
absolute-绝对定位	√	√	√	最邻近的定位祖先元素（如果找不到这样的祖先元素，参照对象是视口
fixed-固定定位	√	√	√	视口
ssticky	√	√	×	是相对于最近的滚动祖先包含滚动视口的

五、css属性- z-index

5.1、 z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）

默认后面的元素会盖到前面的元素

默认值为 auto 盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。

取值可以是正整数、负整数、0

5.2、比较原则

5.2.1、什么是绝对定位兄弟元素

就是都在第一层的绝对定位，非绝对定位元素下的绝对定位元素

如果是兄弟关系 ✓ z-index越大，层叠在越上面 ✓ z-index相等，写在后面的那个元素层叠在上面
如果不是兄弟关系 ✓ 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较

✓ 如果自己的绝对定位的祖先在下面的话，那么本身元素设置多大也是无效了

✓ 而且这2个定位元素必须有设置z-index的具体数值

六、flaot

6.1、认识浮动

float 属性可以指定一个元素应沿其容器的左侧或右侧放置，脱离标准流，允许文本和内联元素环绕它。
- float 属性：图文混排，最初只用于在一段文本内浮动图像, 实现文字环绕的效果;
- 但是早期的CSS标准中并没有提供好的左右布局方案, 因此在一段时间里面它成为网页多列布局的最常用工具
绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
以通过 float 属性让元素产生浮动效果，float 的常用取值
- none：不浮动，默认值
- left：向左浮动
- right：向右浮动

6.2、浮动flaot的规则（4个）

规则一: 向左浮动或者向右浮动，元素一旦浮动后, 脱离标准流
- 元素一旦浮动后, 脱离标准流
  
  朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止 定位元素会层叠在浮动元素上面
规则二: 不能超出包含块(大多数指父级元素）;

如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界

行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
规则三: 浮动元素不能层叠
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
规则四: 浮动元素会将行内级元素内容推出
- 图文环绕效果
- 比如行内级元素、inline-block元素、块级元素的文字内容

浮动的使用

 <style>
    .container {
        /*父元素不用设置bfc*/
        margin: 100px;
        height: 400px;
        background-color: blueviolet;
    }
    .item{
        background-color: sienna;
        display: inline-block;
        width: 50px;
        height: 50px;
        float: left;
    }
  </style>

6.3、元素与元素之间换行之后默认的间隙去除的方法

1.删除换行符(不推荐)

2.将父级元素的font-size设置为0, 但是需要子元素设置回来

3.通过子元素(span)统一向一个方向浮动即可*

4.flex布局

5.word-spacing(兼容性不是很好)

6.margin 负值 4px（不使用flex和float的情况下推荐）

6.4、京东排行案例margin-5px的使用

复习的时候多练-:不知道怎么解释，有空的时候百度一下

父级盒子的宽度=子盒子宽度width默认是auto+magin；

 <style>
    .container{
      margin: 0 auto;
      width: 1190px;
      background-color: #0f0;
      height: 700px;
    }
    .item{
      float: left;
      width: 230px;
      height: 300px;
      background-color: #eee;
      margin: 0 5px;
    }
    .box{
      margin: 0 -5px;
    }
  </style>
</head>
<body>
  <!-- 1、父级盒子的宽度是1190 -->
  <div class="container">
    <!-- 2、父级盒子的宽度=子盒子宽度width默认是auto+magin；
        此时子盒子m=0,b=0,p=0 所以子盒子的宽度等于父级的宽度1190
        3、当我们box的margin设置为-5px的时候就相当于1190=widtn-5
        所以这时候box会被撑大为1200，但margin设置的是-5px所以左右5px是不占据空间的还是
        1190
    -->
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>
</body>

6.5、浮动的问题 – 高度塌陷*

题：为什么要清除浮动

由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
- 父元素计算总高度时，就不会计算浮动子元素的高度，导致了高度坍塌的问题
解决父元素高度坍塌问题的过程，一般叫做清浮动（清理浮动、清除浮动）

清浮动的目的是
- 让父元素计算总高度的时候，把浮动子元素的高度算进去

6.5.1、解决高度塌陷 clear

clear属性是做什么的呢?
- clear 属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
clear的常用取值
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值，无特殊要求
那么我们可以利用这个特性来清除浮动.作用在包含块上

    /* 最终的解决方案 */
    .clear_fix::after {
      content: "";
        /* 清除左右浮动 */
      clear: both;
    /*要是块级元素，行内元素没有内容的话是空的*/
      display: block;

      /* 浏览器兼容 */
      visibility: hidden;
      height: 0;
    }

    .clear_fix {
      /* IE6/7 */
      *zoom: 1;
    }
  </sty

6.6、布局方案总结、去除img下面的像素

定位方案	应用场景
normal flow（标准流）	垂直布局
absolute positioning（绝对定位）	层叠布局
float（浮动）	水平布局

img下面的像素vertical：top