前端学习-定位
定位:将盒子定在某一位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。
1.定位模式
定位模式决定元素的定位方式,它通过CSS的position属性来设置,他的值分为四个:
值 | 语义 |
---|---|
static | 静态定位 |
relative(相对的.adj) | 相对定位 |
absolute(绝对的.adj) | 绝对定位 |
fixed | 固定定位 |
相对定位:--是元素在移动位置的时候,是相对于它原来的位置来说的(简单说自恋型)
--盒子移动后保留其原来位置,不会被其他盒子占用,移动后的盒子会覆盖其他盒子(不脱标,继续保留原来位置)
绝对定位:--是元素在移动位置的时候,是相对于它祖先元素来说的(拼爹型)
特点:1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
关于‘子绝父相’:意为子级是绝对定位的话,父级要用相对定位。
因为子级使用绝对定位不保留原来位置,利于浮动于盒子上不影响其余元素布局,父级使用相对定位可保留原来位置,使其样式不会被其他元素干扰。所以相对定位经常用来作为绝对定位的父级。
总结:父级需要占有位置,使用相对定位,子盒不需要占有位置,则是绝对定位。