css positon学习笔记

css positon

本文由慕课网视频整理

首先css元素大致分为：

• 块状元素
  • 特点：独占一行
  • 代表元素：
    • div
    • p
    • H1~H6标题
    • table
    • 有序无序列表ol、ul、li等
• 内联元素/块内元素
  • 特点：可以并列一行，宽高属性、内外边距属性、float属性失效
  • 代表元素：
    • a
    • img
    • input
    • span
    • img等

盒子模型 和 定位模型

盒子模型常常根据margin padding等属性使内容的位置进行变化
定位模型是相对于父元素或窗口等元素的位置而定位变化

position的可选参数

• static 默认值
• relative 相对定位
• absolute 绝对定位
• fixed 固定定位
• inherit 继承
• static 没有定位（默认）

一、relative 相对定位

当属性为relative时，原点是原来的位置的左上角

• top = 20px，则相对于原点向下偏移20px
• left = 20px，则相对以原点向右偏移20px
• right = 20px，则相对于原点向左偏移20px（会隐藏一部分）
• bottom = 20px，则相对于原点向上偏移20px（会隐藏一部分）

二、absolute 绝对定位

会脱离文档流（即离开网页body）
绝对定位会根据父元素的四个顶角进行绝对定位

• top = 20px，以左上角为原点向下偏移20
• bottom = 20px，以左下角为原点向上偏移20
• left = 20px，以左上角为原点向右偏移20
• right = 20px，以右上角为原点向左偏移20

三、fixed 固定定位

会脱离文档流（即离开网页body）
相对于窗口的四边进行固定定位（浮动定位）
不随滚动条的滚动而变动位置，常用于悬浮窗广告、登录窗口等

四、inherit 继承

继承父元素的position属性
（如果父元素为fixed，则自己的top和left等不会是以父元素定位，而是以窗口）

五、父子元素absolute的参照点问题

absolute属性的元素会向上冒泡找寻最近的非static的容器，并把该容器左上角作为定位。