Css中position总结

css定位 position

总结自幕课网“css定位 position”

文档流

Html中常用的三种布局方式

• 标准流（网页中默认的布局方式即顺序布局）
• 浮动（float）
• 定位（position）

Html中的 元素大体可分为两大类元素
1、块级元素（H1~H6，div,有序无序列表（ol、ul、li）,table,p等…）
2、内联元素(a,span,img,input)
区别：块级元素会独占一行，而内联元素会和相邻元素默认在同一行，当该行长度无法容纳时才会换行

两种元素的排列方式在没有干扰时是符合标准流的排列方式

position属性的意义

• position属性决定了元素将如何定位
• 通过top、right、bottom、left实现位置

position中的可选参数

• 
  

• static

position中的默认值，元素会按标准流方式排列

• relative

  相对定位，可通过top、right、bottom、left改变位置
  始终以网页的左上角作为原点移动，设置top和left时以网页下端方向为Y正轴以网页的右端方向为X正轴，设置bottom和right时以网页的上端为Y正轴，以网页的左端为X正轴。

• absolute

  绝对定位，通过设置left，right，top，bottom会使得元素脱离正常的文档流

• fixed

  固定定位，通过设置left，right，top，bottom会使得元素脱离正常的文档流
  注：与绝对定位的区别,不论父元素是否有定位属性都不会受制于父元素，

• inherit
  

  继承，会继承父元素的定位属性，如果父元素没有定位属性，则作为子元素也不会具有定位属性

• 
  注：所有带定位属性的元素都会出现层级的区分，后写的带有定位属性的层级大于先写的带有定位属性的层级，也就是会覆盖先写的部分

  z-index

  可以设置元素的叠加顺序，但依赖定位属性，有三种属性（auto,num（可以设定数值）,inherit（继承））
  1、z-index大的元素可以覆盖z-index小的元素
  2、z-index为auto的元素不参与层级比较
  3、z-index为负值，元素可被普通流中的元素覆盖
  4、z-index不存在时浏览器默认z-index为0
  注：子元素的层级会受制于父元素，也就是子元素的z-index无论数值为多少其层级总是大于相邻的层级小于父元素层级的元素而小于相邻的层级大于父元素层级的元素