Skip to content

CSS中的position

🕒 Published at:

position

CSS的position属性用于元素的定位,可以实现下拉列表、提醒框等样式。分为:absolute fixed relative staticsticky

static

static为默认值,不脱离文档流,并且TRBL属性不起作用。

relative

relative相对定位,与static不同。relativeTRBL属性相对于原本元素所在位置进行定位,与absolute不同

absolute

absolute绝对定位,如果其父组件的position属性为relative,则其top right bottom left属性相对于父组件定位,如果不是则相对于全局定位,脱离文档流。

fixed

fixedabsolute不同,fixed为相对可视窗口的定位,无论窗口如何滚动,fixed定位的位置不会因此发生改变。但是,最好不用跟<input/>元素放在一起使用,当fixed作为footer元素固定在底部时,会导致移动端阻挡输入框的问题。

sticky

sticky属性类似于relativefixed的结合,超出目标区域时与fixed相同。需要指定TRBL属性之一使之生效。