css之position定位

position定位：position属性是指本地相对于上级的定位，position定位又分为绝对定位和相对定位。

默认值是static，表示元素没有被定位，出现在文档流中应该出现的位置。如果用position来布局

页面，父级元素的position属性必须为relative或absolute。行元素加了position：absolute后可设

置宽、高（或是加float和fixed）

布局容器要指定一个position值，一般是relative；布局容器里面的元素有如果要基于父元素进行定位

那么父容器里面的元素position就要指定为absolute

定位元素的步骤：指定一个布局容器（position:relative）→ 指定要定位的元素（position:absolute)

→ 设置方位值：top、left、right、bottom是多少像素（只需设置其中两个）

如果不指定布局容器的话就是相对于浏览器的定位

1、常见的属性值

（1）static:无特殊定位，对象遵循正常文档流

（2）relative：对象遵循正常文档流

（3）absolute：（可以是负值）对象脱离正常文档流，使用（top:、right:、bottom:、left:）

     等属性指定方位

     position:relative 相对定位（布局容器）

     position:absolute 绝对定位（需要定位的元素）

    <1>当某一个元素本身就是absolute的时候也会被认为是一个父（布局）容器

    <2>常见的去边距的作法：*{margin:0px;padding:0px;}    

    <3>基于整个浏览器没有特殊定位的时候用relative，如果是基于浏览器中某个元素的定位就用

absolute

（4）fixed：对象脱离正常文档流，使用top、right、bottom、left等属性以窗口为参考点进行定位，

            当出现滚动条时，对象不会随着滚动

     <1>脱离文档流的东西不加width就无法显示

     <2>要设置文字在背景色的中间需要设置：

         text-align:center;

         line-height:和背景色的高一致

（5）设置边距：

     margin：外边距

     padding：内边距

2、z-index属性（可以是负值）：设置元素的堆叠顺序。拥有更高堆叠顺序(也就是说z-index属性

   值较高的一方）的元素总会堆叠在上面

（1）可以使用z-index的定位元素（也就是说有作用效果）：relative、absolute、fixed

3、display属性：css中每一个网页元素都有display属性，用于锁定该元素的类型。且每个元素

都有默认的display属性值

（1）常见属性值：

     <1>none：隐藏对象

     注意与opacity的区别是opacity会留有元素的位置，只是透明度变化而已，而display：none

     是将整个元素隐藏，没有留有位置

     <2>inline：指定对象为行内元素

     <3>block：指定对象为块级元素

     <4>inline-block：指定对象为内联块元素

     <5>table-cell：指定对象为表格单元格，加了table-cell属性的行内元素可以设置宽、高

        设置元素垂直居中：

        dispaly:table-cell

        vertical-align:middle;

4、css选择器优先级

（1）优先级值比较：以数值大的为准（记住以下四个然后进行计算）

     style = 1000

     id = 100

     class = 10

     element(元素) = 1

     以上四个值是可以相加的，例如：

     div .class{}   元素 + class = 11

     #d1{}          id = 100

     还是比不过id的优先级值

（2）通常面试时问到的css选择器优先级是指“基础选择器”的优先级：

     ID>CLASS>元素>*

     importent>内联>ID>类>标签|伪类|属性选择器>伪元素>继承>通配符