定位方式相关属性
position
取值:
1、static : 默认,静态定位
2、relative : 相对定位
3、absolute : 绝对定位
4、fixed : 固定定位
2、与定位位置相关属性
top
bottom
left
right
以像素为单位的值
3、堆叠顺序
z-index : value;
值越大越靠近用户
4、static
页面中默认定位方式,即文档流定位
5、相对定位
相对于当前元素本身出现的位置而实现定位的一种方式
实现方式:
position:relative;
通过 top bottom left right 来实现位置移动
使用场合:
1、会进行位置的微妙的调整
2、配合着绝对定位使用
6、绝对定位
特点:脱离文档流,不占据页面空间
定位位置:相对于【最近】的【已定位】的【祖先】元素
如果祖先元素没有进行定位,它的位置就相对于最初的包含块(body)
<nav>
<div>
<p>
<span></span>
</p>
</div>
</nav>
已定位:非static , 指 relative、absolute、fixed
实现方式:
position:absolute
top,bottom,left,right : 位置偏移量,相对于最近的已定位的祖先元素去偏移。
使用场合:
1、弹出菜单的位置
所有的弹出菜单都是绝对定位
7、固定定位
将元素固定在页面上的某一个位置,不随滚动条滚动而发生改变
语法:
position:fixed;
top、left、right、bottom
常用方式 .设置 父元素为position:relative
2. 设置子元素为 position : absolute
3. 设置子元素相对于父元素的位移
如 top:20px; left:30px;