HTML 定位

position HTML 定位 73期

定位position

• static 静态定位
  • 方位值是不起作用
  • 特性;什么也不会发生
• relative 相对定位
  • 方位值是起作用
  • 特性;
    • 1.不脱离文档流
    • 2.不会对元素的高度造成影响；
    • 3.不会使行内元素支持宽高；
    • 4.根据样式类型定论是否支持margin,padding！
    • 5.不会对inline-block，vertical-align ,float造成影响；
• absolute 绝对定位
  • 方位值是起作用；
  • 参考系：
  • 除了静态定位之后，其它都可以作为参考；
  • 如果没有参考系，默认为body来进行参考；
  • 作为参考物需要满足的要求：
  • 1.是必须为直系父级关系；
  • 2.除了静态定位之后，其它都可以作为参考；
  • 注意：
  • 如果直系父级有多个都作为参考系，只取离元素最近的元素作为参考系；
  • （就近原则
  • 特性
    • 1.脱离文档流（完全）
    • 2.使用后默认由内容撑开宽高；
    • 3.会使行内元素支持宽高；
    • 4.支持margin,padding;
    • 5.不支持margin:auto;
    • 6.会对inline-block，vertical-align ,float造成影响；
• fixed 固定定位
  • 方位值是起作用；
  • 参考系：
  • 以页面的可视区域作为参考系（不受页面的实际高度限制）
• 方位值： top 上 bottom 下 left 左 right 右
• 默认层级：z-index:10px;
  • 如果使用>0 居上
  • 等于0 默认值
  • 小于0 底部
  • 如果层级样式相等，后来者具上。