CSS定位属性详解

CSS定位属性
关于css定位属性详解及用法：
在css中，定位属性position是用来检索或设置对象的定位方式的属性。
它主要有以下5个属性值：
1.无定位static：默认值，也可以用于取消元素之前的定位设置。
2.相对定位relative：（参照物：自己所在的位置）
特点：①不使元素脱离文档流，原来的空间会被保留。
②如果没有定位偏移量left、top、right、bottom，对元素本身没有任何影响；同样，left、top、right、bottom不能独自存在，必须配合定位元素一起使用。
③不影响其他元素布局。

3.绝对定位absolute:（参照物：包含块----该元素的祖先级元素）
特点：①使元素完全脱离文档流，原来的空间会被后面的元素覆盖。
②使内联元素支持宽高（让内联具备块特性）。
③使块元素默认宽根据内容决定（让块具备内联特性）。
④包含块是绝对定位的基础，给祖先级元素定义成包含块的方法：
给祖先级元素添加position：relative/absolute/fixed；
如果它的祖先级元素定义了包含块，那它就最近的祖先级元素发生偏移。如果它的祖先级元素没有定义包含块，则相对于浏览器的可视窗口发生偏移。（默认情况下，浏览器的可视窗口是一个大的包含块）

ps：
（1）绝对定位和相对定位的区别：
a.相对定位的参照物是自己本身所在的位置，绝对定位的参照物的是包含块。
b.相对定位不会脱离文档流，而且不会对页面的布局产生影响；绝对定位会脱离文档流，原来的空间会被后面的元素覆盖。
（2）检索或设置对象的层叠顺序属性（只对具有定位属性的元素起作用):
z-index: auto(默认值)/number(无单位的整数值，可为负)；
如果对象没有设置z-index，最后写的对象优先显示在上层；如果对象设置了z-index，则数值越大，层越靠上。

4.固定定位fixed:（参照物：整个浏览器窗口）
特点：①使元素完全脱离文档流，原来的空间会被后面的元素覆盖。
②使内联元素支持宽高（让内联具备块特性）。
③使块元素默认宽根据内容决定（让块具备内联特性）。
④相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不受祖先元素的影响。

5.黏性定位sticky：
在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式。