微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍

No Position

不设置position时显示,以红色元素做测试:

微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍_第1张图片

Static

元素根据界面正常流进行定位。top、right、bottom、left 和 z-index 属性不起作用。这是默认值。

红色元素设置position: static,显示如下:

微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍_第2张图片

Relative

元素根据界面正常流进行定位。以元素当前位置为基准,根据top、right、bottom、left设置进行偏移。元素偏移不会影响其他元素显示的位置,即其他元素在元素偏移前后位置不变,仍会保留元素偏移前空间。

红色元素设置position: relative; left: 100px,显示如下。

微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍_第3张图片

Absolute

元素脱离正常的文件流。以最近的position不为static的祖先元素位置为基准,根据top、right、bottom、left设置进行偏移。其他元素会调整位置,相当于此元素不存在时的显示。

红色元素父元素设置position:relative,红色元素设置position: absolute; left: 

你可能感兴趣的:(微信小程序初学者进阶联盟,html,前端)