7.21定位

今天和大家分享一些关于定位的知识点

一、什么是定位

定位postion属性，可以让我们将元素从文档流中取出，然后使用方位词属性（left top right bottom）精准的控制它的位置。

二、取值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘滞定位，一般用于页面导航的吸顶效果

• relative

  相对定位能让元素保持原文本流位置的同时，可以通过方位属性进行相对于原位置的偏移。

  （定位元素才有的方位属性： top | bottom | left | right，值一般使用px单位或%值。）

  • 特点

    不会脱离文档流

    不影响元素本身的任何特性

    如果不加方位词偏移那么没有任何影响

• absolute

  绝对定位能让元素脱离文档流（原地起飞...），使用方位属性相对于最近的有定位的父级元素进行偏移；

  注意！方位属性初始值不是0，而是auto。

  方位属性left和top 优先级比 right和bottom高，比如一个元素既拥有left也拥有right，最终位置以left为准。

  • 特点

    脱离文档流

    元素宽高由内容撑开

    找不到最近的定位父级则相对于文档流

    一般配合相对定位使用（参照物）

    设置了绝对定位,没有设置层级;html后写居上

    margin:auto 失效

• fixed

  固定定位能让元素脱离文档流，使用方位属性相对于浏览器可视区进行偏移；

  • 特点

    脱离文档流

    元素宽高由内容撑开

    margin:auto失效

• sticky

  当元素的position属性设置为sticky时，则开启了元素的粘滞定位

  • 特点

    以浏览器为参照物（体现固定定位特点）；

    占有原来位置（体现相对定位特点）；

    粘滞定位可以在元素到达某个位置时，将其固定；

    没有达到top值之前正常显示,随着滚动条的滚动而滚动，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

 

4. 盒子居中

使用定位让元素在父级中居中的方式：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

或者：

position: absolute;
top: 50%;
left: 50%;
margin-left: -自身宽度一半;
margin-top: -自身高度一半;