网页中相对布局和绝对布局分别如何实现

[[{"txt": "\u7f51\u9875\u4e2d\u7684\u5e03\u5c40\uff0c\u9ed8\u8ba4\u662f\u6309\u7167\u6587\u6863\u6d41\uff0c\u4ece\u4e0a\u5230\u4e0b\u6328\u7740\u6328\u7740\u6392\u5217\u7684\uff0c\u4f46\u662f\u4e5f\u53ef\u4ee5\u901a\u8fc7css\uff0c\u8bbe\u7f6e\u5185\u5bb9\u76f8\u5bf9\u5e03\u5c40\uff08relative\uff09\u548c\u7edd\u5bf9\u5e03\u5c40\uff08absolute\uff09"}], [{"txt": ["\u5de5\u5177/\u539f\u6599"]}, {"txt": "vscode"}], [{"txt": ["\u65b9\u6cd5/\u6b65\u9aa4"]}, {"txt": "\u6253\u5f00vscode\u521b\u5efa\u4e00\u4e2aH5\u89c4\u8303\u7684html\u9875\u9762H5Position.html"}, {"img": ["https://exp-picture.cdn.bcebos.com/3bcdb808a50f94fc1b6e567d4cf88a775cddfc75.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5728\u5176\u4e2d\u6dfb\u52a0\u56db\u4e2a\u5757\u7ea7\u5143\u7d20div\uff0c\u4e0d\u8bbe\u7f6e\u5e03\u5c40\uff0c\u8ba9\u6d4f\u89c8\u5668\u81ea\u52a8\u89e3\u6790\u4f4d\u7f6e"}, {"img": ["https://exp-picture.cdn.bcebos.com/95bd4e8c9bcec7f8c495906e034ce54a2e27fb75.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u9875\u9762\uff0c\u770b\u5230\u6548\u679c\u5982\u56fe\u6240\u793a\uff0c\u56db\u4e2adiv\u6309\u7167\u5728html\u4ee3\u7801\u4e2d\u7684\u4f4d\u7f6e\u987a\u5e8f\uff0c\u4ece\u4e0a\u5230\u4e0b\u4f9d\u6b21\u5c55\u793a"}, {"img": ["https://exp-picture.cdn.bcebos.com/8b3643dd884ce54a7dc52a5ca3066b0193ddf775.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u901a\u8fc7css\u8bbe\u7f6e\u7b2c\u4e09\u4e2adiv\u4e3a\u76f8\u5bf9\u5e03\u5c40position: relative;\u8bbe\u7f6e\u8fd9\u4e2a\u5c5e\u6027\u4e4b\u540e\uff0c\u8fd8\u9700\u8981\u8bbe\u7f6e\u76f8\u5bf9\u4f4d\u7f6e\uff1a\u4e0atop\u3001\u53f3right\u3001\u4e0bbottom\u3001\u5de6left \u56db\u4e2a\u5c5e\u6027\u4e2d\u7684\u4e00\u4e2a\u6216\u8005\u591a\u4e2a\u3002\u76f8\u5bf9\u4f4d\u7f6e\u4e0d\u4f1a\u5f71\u54cd\u5176\u4ed6\u5468\u56f4\u5143\u7d20\u7684\u4f4d\u7f6e"}, {"img": ["https://exp-picture.cdn.bcebos.com/e40b3127e7ef28063ee35f6eb840b6f39087f275.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u6548\u679c\u5982\u56fe\u6240\u793a\uff0c\u7b2c\u4e09\u4e2adiv\u79fb\u52a8\u540e\uff0c\u5e76\u4e0d\u4f1a\u5f71\u54cd\u7b2c\u4e8c\u3001\u4e09\u3001\u56db\u7684\u4f4d\u7f6e"}, {"img": ["https://exp-picture.cdn.bcebos.com/2947750192dd3340ee115c34881c99c0aefcf175.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u540c\u6837\u7684\u901a\u8fc7css\u8bbe\u7f6e\u7b2c\u4e09\u4e2adiv\u4e3a\u7edd\u5bf9\u5e03\u5c40position: absolute;\u8bbe\u7f6e\u8fd9\u4e2a\u5c5e\u6027\u4e4b\u540e\uff0c\u8fd8\u9700\u8981\u8bbe\u7f6e\u76f8\u5bf9\u4f4d\u7f6e\uff1a\u4e0atop\u3001\u53f3right\u3001\u4e0bbottom\u3001\u5de6left \u56db\u4e2a\u5c5e\u6027\u4e2d\u7684\u4e00\u4e2a\u6216\u8005\u591a\u4e2a\u3002\u7edd\u5bf9\u4f4d\u7f6e\u4f1a\u5f71\u54cd\u5176\u4ed6\u5468\u56f4\u5143\u7d20\u7684\u4f4d\u7f6e"}, {"img": ["https://exp-picture.cdn.bcebos.com/3201a8f39187031cc222624f6a86242fa972ec75.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}, {"txt": "\u5728\u6d4f\u89c8\u5668\u4e2d\u8fd0\u884c\u6548\u679c\u5982\u56fe\u6240\u793a\uff0c\u7b2c\u4e09\u4e2adiv\u4e0a\u79fb\u540e\uff0c\u7b2c\u4e8c\u3001\u7b2c\u56db\u4e2adiv\u5c31\u6328\u5728\u4e00\u8d77\u4e86"}, {"img": ["https://exp-picture.cdn.bcebos.com/9881b1fce186242ff79059ac35e434daf15ee875.m2m?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_500%2Climit_1"]}]]