标签定位显示

用不同的定位方式,控制标签具体的显示位置。
static 定位是默认值,即没有定位,遵循正常的文档流对象。

1)absolute绝对定位

基本语法

position: absolute;

功能

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于html。

2)relative相对定位

基本语法

position: relative;

功能

相对定位元素的定位是相对其正常位置。

3)fixed绝对定位

基本语法

position: fixed;

功能

元素的位置相对于浏览器窗口是固定位置。

4)sticky粘性定位(扩展)

基本语法

position: sticky;

功能

position: sticky;的元素根据用户的滚动位置进行定位,粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed)。

5)标签定位常用样式

单位 作用
position static | absolute | relative | fixed 设置标签定位方式
left auto | 长度 设置标签左边距
right auto | 长度 设置标签右边距
top auto | 长度 设置标签上边距
bottom auto | 长度 设置标签下边距
z-index auto | 数字 设置标签层叠顺序