html-css中position属性详解

position定位的几个属性

相对定位relative

position: relative;

• 改变位置参照物是自己
• 不改变盒子显示模式
• 占位脱离标准流

代码实现：

.box{
	border: 1px solid red;
	position: relative;
	top: 200px;
	left: 100px;
}

绝对定位absolute

position: absolute;

• 会改变盒子显示模式
• 完全脱离标准流
• 以最近的已经定位的父级为参照物，如果没有默认为浏览器
• 子绝夫相

固定定位fixed

position:fixed

• 显示模式会发生改变，行内块特点
• 参照物是浏览器

没有定位static

正常展示，写不写一样

继承父类定位属性值inherit

position:inherit

定位的综合使用

1、固定在顶部的菜单栏
2、固定在侧边的工具栏
3、交流用的弹窗