position和dispaly的用法

position和dispaly的用法

position

static:默认值，没有定位
relative:没有脱离文档流，相对于原来它的位置做定位,原本占据的空间依然会保留
absolute:绝对定位，相对于离它最近的做过定位的祖先元素做定位。或者相对于html元素做定位
fixed:绝对定位，相对于浏览器窗口做定位，当页面滚动，它的位置不变
sticky：它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

display

none：元素隐藏，不占用空间
inline：转换成行内元素，不能设置宽高，垂直方向的padding和magin对它没用
inline-block:转换成行内块元素，
block：转换成块元素
list-item：此元素会作为列表显示
…