{"id":230,"date":"2023-02-23T06:38:47","date_gmt":"2023-02-22T22:38:47","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=230"},"modified":"2023-04-30T15:22:24","modified_gmt":"2023-04-30T07:22:24","slug":"css-implement-two-layers-to-overlap-and-display","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/23\/css-implement-two-layers-to-overlap-and-display\/","title":{"rendered":"CSS\u5b9e\u73b0\u4e24\u4e2a\u5c42\u91cd\u53e0\u4e0e\u663e\u793a"},"content":{"rendered":"<p>position\u6709\u4ee5\u4e0b\u5c5e\u6027\uff1astatic\u3001inherit\u3001fixed\u3001absolute\u3001relative<\/p>\n<ul>\n<li>static\uff1a\u662f\u9ed8\u8ba4\u72b6\u6001\uff0c\u6ca1\u6709\u5b9a\u4f4d\uff0c\u5143\u7d20\u51fa\u73b0\u5728\u6b63\u5e38\u7684\u6d41\u4e2d\uff08\u5ffd\u7565 top, bottom, left, right \u6216\u8005 z-index \u58f0\u660e\uff09<\/li>\n<li>inherit\uff1a\u4ece\u7236\u5143\u7d20\u7ee7\u627f position \u5c5e\u6027\u7684\u503c<\/li>\n<li>fixed\uff1a\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u6d4f\u89c8\u5668\u7a97\u53e3\u8fdb\u884c\u5b9a\u4f4d\uff08\u5373\u6eda\u52a8\u6d4f\u89c8\u5668\u65f6\uff0c\u5143\u7d20\u6c38\u8fdc\u56fa\u5b9a\u663e\u793a\u5728\u7a97\u53e3\u53ef\u89c6\u533a\u7684\u67d0\u4e2a\u4f4d\u7f6e\uff09<\/li>\n<li>absolute\uff1a\u751f\u6210\u7edd\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e static \u5b9a\u4f4d\u4ee5\u5916\u7684\u7b2c\u4e00\u4e2a\u7236\u5143\u7d20\u8fdb\u884c\u5b9a\u4f4d<\/li>\n<li>relative\uff1a\u751f\u6210\u76f8\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u76f8\u5bf9\u4e8e\u5176\u6b63\u5e38\u4f4d\u7f6e\u8fdb\u884c\u5b9a\u4f4d<\/li>\n<\/ul>\n<p><!-- more --><\/p>\n<p>\u4e24\u8005\u6700\u6838\u5fc3\u7684\u533a\u522b\u5728\u4e8e\uff1aabsolute\u4e0d\u53d7\u7236\u5143\u7d20\u91cc\u7684\u5176\u4ed6\u5143\u7d20\u5f71\u54cd\uff0c\u800crelative\u4f1a\u53d7\u5230\u7236\u5143\u7d20\u91cc\u7684\u5176\u4ed6\u5143\u7d20\u5f71\u54cd<\/p>\n<pre><code class=\"language-html\">&lt;!doctype html&gt;\n&lt;html&gt;\n&lt;head&gt;\n&lt;meta charset=&quot;utf-8&quot;&gt;\n&lt;title&gt;test&lt;\/title&gt;\n&lt;style type=&quot;text\/css&quot;&gt;\n#father{\n    position:relative;\/*\u7236\u76d2\u5b50\u4f4d\u7f6e\u8981\u7528relative*\/\n    margin:20px auto;\n    width:400px;\n    height:100px;\n    border:1px solid red;\n    }\n#father #a{\n    position:absolute;\/*\u5b50\u76d2\u5b50\u4f4d\u7f6e\u8981\u7528absolute*\/\n    width:100%;\n    height:50px;\n    background:blue;\n    opacity:0.6;\n    z-index:2;\n    }\n#father #b{\n    position:absolute;\/*\u5b50\u76d2\u5b50\u4f4d\u7f6e\u8981\u7528absolute*\/\n    width:100%;\n    height:80px;\n    background:#F4AF19;\n    text-align:right;\n    z-index:1;\n    }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;!--\u6309\u4e0a\u9762\u7684CSS\u5b9a\u4f4d\u65b9\u6cd5\u5e03\u5c40\u5c31\u4f1a\u91cd\u53e0\uff0c\u90a3\u4e2a\u5b50\u76d2\u5b50\u5728\u524d\u9762\u7528Z-INDEX \u51b3\u5b9a--&gt;\n&lt;div id=&quot;father&quot;&gt;\n    &lt;div id=&quot;a&quot;&gt;\u6211\u662fA\u76d2\u5b50&lt;\/div&gt;\n    &lt;div id=&quot;b&quot;&gt;\u6211\u662fB\u76d2\u5b50&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>position\u6709\u4ee5\u4e0b\u5c5e\u6027\uff1astatic\u3001inherit\u3001fixed\u3001absolute\u3001relative st [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[85],"class_list":["post-230","post","type-post","status-publish","format-standard","hentry","category-frontend-basic","tag-css"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=230"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/230\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}