肥仔学习日记----CSS定位

肥仔学习日记----CSS定位

一、静态定位

1.静态定位 static

选择器{ position : sattic ;} 

默认的定位方式.即无定位的意思。

2.相对定位 relative (重要)

选择器{position :relative ;}

相对定位是元素在移动位置的时候，是相对于他原来的的位置来说的

相对定位的特点：
1.移动位置的时候是参照点是直接原来的位置
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待他。不脱里标准流，保留原来的位置。

3.绝对定位 absolute（重要）

选择器 {position:absolute}

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
2.以最近一级带有定位的祖先元素为参考点
3.绝对定位不在占有原来的位置，不再占有。

子绝父相

1 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
2.父盒子需要加定位限制盒子在父盒子内显示
3.父盒子布局时，需要占有位置，因此父亲只能是相对定位。

父亲占位置，而在绝对定位 在父亲内随便走。

4.固定定位fixed （重要）
固定定位是元素固定于浏览可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不变。

选择器 {position :fixed;}

1.以浏览器的可是窗口为参照点移动元素 可是窗口 就是一直保持可以看见的位置 上下滚动的时候 他都在你眼前
2.不占有原来的位置,脱标！

小技巧： 让元素永远处于版心的右侧

5.粘性定位 sticky
相对定位和固定定位的混合。

选择器 {position：sticky；top:10px;}

1.以浏览器的可是窗口为参照的点移动元素
2.粘性定位占有原先的位置
3.必须添加 一个 top/left/right/bottom其中一个才有效果

z-index:1;

都是固定定位的元素，如果没写z-index属性/或者z-index属性相等 后来在压在前者上 但是如果不相等 大的在上