CSS有几种定位方式How-many-positioning-methods-in-css

49次阅读

共计 1302 个字符，预计需要花费 4 分钟才能阅读完成。

static: 正常文档流定位，此时 top, right, bottom, left 和 z-index 属性无效，块级元素从上往下纵向排布，行级元素从左向右排列。
relative：相对定位，此时的『相对』是相对于正常文档流的位置。
absolute：相对于最近的非 static 定位祖先元素的偏移，来确定元素位置，比如一个绝对定位元素它的父级、和祖父级元素都为 relative，它会相对他的父级而产生偏移。
fixed：指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，比如那种回到顶部的按钮一般都是用此定位方式。
sticky：粘性定位，特性近似于 relative 和fixed的合体，其在实际应用中的近似效果就是 IOS 通讯录滚动的时候的『顶屁股』。

static: normal document flow positioning, meanwhile, the attributes of top, right, bottom, left 和 z-index are invalid, and the block-level elements are arranged vertically from top to bottom, the inline-level are arranged horizontally from left to right.
relative: relative positioning, the relative at this time is related to the position of the normal document flow.
absolute: related to the nearest no-static positioning the offset of ancestor element to determine the positioning of element. Such as an absolute positioning element, its parent and grandparent elements all are realtive, it will offset from its parent.
fixed: specify the position of element realted to the viewport of screen to specify the position of element. the potion of element will not change when the screen is scrolled. For example, the button that back to top generally uses this positioning methods.
sticky: Sticky positioning, the characteristics of it is similar to the combination of realtive and fixed, and its approximate effect in pratical applications is the top butt when the IOS address book scrolls.