this is a heading with no position

this heading is moved left according to its normal position

this heading is moved right according to its normal position

relative positioning moves an element relative to its original position.

the style "left:-20px" subtracts 20 pixels from the element's original left position.

the style "left:20px" adds 20 pixels to the element's original left position.

this is a heading with no position

this heading is moved upwards according to its normal position

note: even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.

this is a heading with an absolute position

with absolute positioning, an element can be placed anywhere on a page. the heading below is placed 100px from the left of the page and 150px from the top of the page.

【代码笔记】web-百家乐凯发k8

因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。

参考资料：《菜鸟教程》