position:定位
给元素定位后不能设置浮动,会改变行标签和块标签的表现(参考float),块级标签不再继承父级的宽度,行级标签可以设置宽高。给元素设置定位后,一定要初始化位置。
position:fixed;固定定位 可以设置负数和百分比 以浏览器视窗定位的一种方式
position:relative;相对定位 相对于元素的当前位置偏移
不会改变元素的默认表现,主要用于绝对定位的组合,帮助绝对定位元素确定坐标
position:absolute;绝对定位 定在文档中的某个位置,不会改变
position:static;默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)
设置了绝对定位的元素,如果父级元素没有设置absolute或者relative或者fixed,那么该元素会以文档进行偏移(绝对定位没有给其祖辈元素设置相对定位(relative)或绝对定位(absolute)或者固定定位(fixed),则相对于浏览器窗口定位;就与fixed没什么别),如果父级元素设置了absolute或者relative或者fixed,那该元素会以父级元素进行偏移
position应用场景如:(涉及到层级问题)
1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告,功能按钮等)
2.导航栏浮动置顶。
3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)