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:
在没有到达指定位置的时候,是没有定位效果的,到达了指定位置,就变成了固定模式。