html 两个图片重叠 css怎么让两张图片叠加，不用background只用img...

\u600e\u4e48\u8ba9\u5b9e\u73b02\u4e2a\u56fe\u7247\u53e0\u5728\u4e00\u8d77\uff08HTML) \u4e00\u4e2a\u4f5c\u4e3a\u80cc\u666f\u4e00\u4e2a\u4f5c\u4e3a\u4e3b\u56fe\uff0c\u4ed6\u4eec\u662f\u91cd\u53e0\u7684\uff01 \uff08\u5728\u7ebf\u7b49 \u6025\u5462)

\u5982\u679cB\u4e0d\u60f3\u7528\u80cc\u666f\u56fe\uff0c\u90a3\u4e48\u5c31\u628a\u4ed6\u4eec\u4e24\u4e2a\u653e\u5230\u4e00\u4e2a\u5bb9\u5668\u4e2d\uff08box\uff09\uff0c\u7136\u540e\u7ed9\u8fd9\u4e2a\u5bb9\u5668\uff08box\uff0c\u4e5f\u5c31\u662fA\u548cB\u7684\u7236\u5143\u7d20\uff09\u8bbe\u7f6e position:relative\u5c5e\u6027

\u7136\u540eA\u548cB\u90fd\u8bbe\u7f6eposition:absolute\u5c5e\u6027

\u518d\u7ed9\u4ed6\u4eec\u5206\u522b\u8bbe\u7f6ez-index\u5c5e\u6027\uff0cz-index:\u6570\u5b57\uff0c\u6570\u5b57\u8d8a\u5927\u8d8a\u5728\u4e0a\u9762


\u5e0c\u671b\u80fd\u5e2e\u5230\u4f60

css\u5c42\u53e0\u56fe\u7247\u4ee3\u7801\uff1a
//\u8fd9\u4e2a\u5c42\u4e3a\u5916\u9762\u7684\u7236\u5c42\uff0c\u53ea\u9700\u8bbe\u7f6e\u76f8\u5bf9\u4f4d\u7f6e\u6837\u5f0f\u5373\u53ef
//\u8fd9\u4e2a\u4e3a\u91cc\u9762\u8981\u53e0\u52a0\u7684\u5c42\uff0c\u53ea\u9700\u8bbe\u7f6e\u7edd\u5bf9\u6837\u5f0f
//\u8fd9\u4e2a\u4e3a\u5c42\u91cc\u9762\u7684\u5185\u5bb9\u56fe\u7247

//\u8fd9\u4e2a\u4e3a\u7236\u5c42\u5185\u5bb9

\u6216\u8005\uff1a





\u6269\u5c55\u8d44\u6599\uff1a
CSS \u4e2d\u91cd\u8981\u7684\u53e0\u52a0\u5c42\u53e0\u6982\u5ff5\uff1a
1. \u5c42\u53e0\u4e0a\u4e0b\u6587 (Stacking Context)
\u5c42\u53e0\u4e0a\u4e0b\u6587 (\u5806\u53e0\u4e0a\u4e0b\u6587, Stacking
2. \u5c42\u53e0\u7b49\u7ea7 (Stacking Level)
\u5c42\u53e0\u7b49\u7ea7 (\u5c42\u53e0\u6c34\u5e73, Stacking Level) \u51b3\u5b9a\u4e86\u540c\u4e00\u4e2a\u5c42\u53e0\u4e0a\u4e0b\u6587\u4e2d\u5143\u7d20\u5728z\u8f74\u4e0a\u7684\u663e\u793a\u987a\u5e8f\u7684\u6982\u5ff5\uff0c\u666e\u901a\u5143\u7d20\u7684\u5c42\u53e0\u7b49\u7ea7\u4f18\u5148\u7531\u5176\u6240\u5728\u7684\u5c42\u53e0\u4e0a\u4e0b\u6587\u51b3\u5b9a\u3002\u5c42\u53e0\u7b49\u7ea7\u7684\u6bd4\u8f83\u53ea\u6709\u5728\u540c\u4e00\u4e2a\u5c42\u53e0\u4e0a\u4e0b\u6587\u5143\u7d20\u4e2d\u624d\u6709\u610f\u4e49\u3002
\u5728\u540c\u4e00\u4e2a\u5c42\u53e0\u4e0a\u4e0b\u6587\u4e2d\uff0c\u5c42\u53e0\u7b49\u7ea7\u63cf\u8ff0\u5b9a\u4e49\u7684\u662f\u8be5\u5c42\u53e0\u4e0a\u4e0b\u6587\u4e2d\u7684\u5143\u7d20\u5728Z\u8f74\u4e0a\u7684\u4e0a\u4e0b\u987a\u5e8f\u3002
3. \u5c42\u53e0\u987a\u5e8f (Stacking Order)
\u5c42\u53e0\u987a\u5e8f (\u5c42\u53e0\u6b21\u5e8f, \u5806\u53e0\u987a\u5e8f, Stacking Order) \u63cf\u8ff0\u7684\u662f\u5143\u7d20\u5728\u540c\u4e00\u4e2a\u5c42\u53e0\u4e0a\u4e0b\u6587\u4e2d\u7684\u987a\u5e8f\u89c4\u5219\uff0c\u4ece\u5c42\u53e0\u7684\u5e95\u90e8\u5f00\u59cb\uff0c\u5171\u6709\u4e03\u79cd\u5c42\u53e0\u987a\u5e8f\uff1a
\uff081\uff09\u80cc\u666f\u548c\u8fb9\u6846\uff1a\u5f62\u6210\u5c42\u53e0\u4e0a\u4e0b\u6587\u7684\u5143\u7d20\u7684\u80cc\u666f\u548c\u8fb9\u6846\u3002
\uff082\uff09\u8d1fz-index\u503c\uff1a\u5c42\u53e0\u4e0a\u4e0b\u6587\u5185\u6709\u7740\u8d1fz-index\u503c\u7684\u5b9a\u4f4d\u5b50\u5143\u7d20\uff0c\u8d1f\u7684\u8d8a\u5927\u5c42\u53e0\u7b49\u7ea7\u8d8a\u4f4e\uff1b
\uff083\uff09\u5757\u7ea7\u76d2\uff1a\u6587\u6863\u6d41\u4e2d\u5757\u7ea7\u3001\u975e\u5b9a\u4f4d\u5b50\u5143\u7d20\uff1b
\uff084\uff09\u6d6e\u52a8\u76d2\uff1a\u975e\u5b9a\u4f4d\u6d6e\u52a8\u5143\u7d20\uff1b
\uff085\uff09\u884c\u5185\u76d2\uff1a\u6587\u6863\u6d41\u4e2d\u884c\u5185\u3001\u975e\u5b9a\u4f4d\u5b50\u5143\u7d20\uff1b
\uff086\uff09z-index: 0\uff1az-index\u4e3a0\u6216auto\u7684\u5b9a\u4f4d\u5143\u7d20\uff0c \u8fd9\u4e9b\u5143\u7d20\u5f62\u6210\u4e86\u65b0\u7684\u5c42\u53e0\u4e0a\u4e0b\u6587\uff1b
\uff087\uff09\u6b63z-index\u503c\uff1az-index \u4e3a\u6b63\u7684\u5b9a\u4f4d\u5143\u7d20\uff0c\u6b63\u7684\u8d8a\u5927\u5c42\u53e0\u7b49\u7ea7\u8d8a\u9ad8\uff1b
\u540c\u4e00\u4e2a\u5c42\u53e0\u987a\u5e8f\u7684\u5143\u7d20\u6309\u7167\u5728HTML\u91cc\u51fa\u73b0\u7684\u987a\u5e8f\u5c42\u53e0\uff1b\u7b2c7\u7ea7\u987a\u5e8f\u7684\u5143\u7d20\u4f1a\u663e\u793a\u5728\u4e4b\u524d\u987a\u5e8f\u5143\u7d20\u7684\u4e0a\u65b9\uff0c\u4e5f\u5c31\u662f\u770b\u8d77\u6765\u8986\u76d6\u4e86\u66f4\u4f4e\u7ea7\u7684\u5143\u7d20\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1-css

在.bg类中加上position:relative，然后第二个img中left改成margin-left应该就好了

扩展阅读：html轮播图 左右滑动 ... 如何用html做滚动图片 ... html图片上叠加图片 ... web图片叠加 ... ppt让两个图片重叠透明 ... 两张图片重叠透视 ... html网页div整体居中 ... html图片和图片一排 ... html图片覆盖另一个图片上 ...