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：

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