css 定位脱标,CSS 定位

文章目录

定位( postion)

简介

静态定位(static)

相对定位(relative)

绝对定位(absolute)

固定定位(fixed)

四种定位总结

叠放次序(z-index)

居中布局

定位( postion)

简介

定位一种布局方式。

通过定位可以将元素摆放到页面的任意位置。

元素开启定位后，可以通过偏移量设置位置。

CSS position属性

属性

说明

static

静态定位，默认值

relative

相对定位，相对于文档流的位置进行定位

absolute

绝对定位，相对于上一个已经定位的父元素进行定位

fixed

固定定位，相对于浏览器窗口定位

边偏移

属性

说明

top

顶部偏移

bottom

顶部偏移

left

左侧偏移

right

右侧偏移

静态定位(static)

静态定位是所有元素的默认定位方式。

当position属性为static时可开启元素的静态定位

所谓静态位置指各元素在HTML文档流中默认的位置。

在静态定位下，不能通过边偏移属性改变元素的位置。

相对定位(relative)

相对定位是将元素相对于它在标准流中的位置进行定位。

当position属性为relative时可开启元素的相对定位<