标签定位显示
用不同的定位方式,控制标签具体的显示位置。
static 定位是默认值,即没有定位,遵循正常的文档流对象。
1)absolute绝对定位
基本语法
功能
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html。
2)relative相对定位
基本语法
功能
3)fixed绝对定位
基本语法
功能
4)sticky粘性定位(扩展)
基本语法
功能
position: sticky;的元素根据用户的滚动位置进行定位,粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed)。
5)标签定位常用样式
单位 | 值 | 作用 |
---|---|---|
position | static | absolute | relative | fixed | 设置标签定位方式 |
left | auto | 长度 | 设置标签左边距 |
right | auto | 长度 | 设置标签右边距 |
top | auto | 长度 | 设置标签上边距 |
bottom | auto | 长度 | 设置标签下边距 |
z-index | auto | 数字 | 设置标签层叠顺序 |