{"id":1173,"date":"2021-08-25T20:25:06","date_gmt":"2021-08-25T12:25:06","guid":{"rendered":"https:\/\/blog.odliken.top\/?p=1173"},"modified":"2023-02-05T13:14:39","modified_gmt":"2023-02-05T05:14:39","slug":"css%e5%ae%9a%e4%bd%8d","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=1173","title":{"rendered":"CSS\u5b9a\u4f4d"},"content":{"rendered":"<h2>\u5b9a\u4f4d<\/h2>\n<ul>\n<li>\n<p>\u7edd\u5bf9\u5b9a\u4f4d absolute \u4e0d\u5360\u4f4d\u7f6e\u5b8c\u5168\u6d6e\u52a8\uff0c\u76f8\u5bf9\u5b9a\u4f4d relative \u4f1a\u5360\u6709\u4f4d\u7f6e\u3002<\/p>\n<\/li>\n<li>\n<p>position : relative .absolute \u3001 static . fixed<\/p>\n<\/li>\n<li>\n<p>\u200b                 \u76f8\u5bf9          \u7edd\u5bf9        \u65e0\u5b9a\u4f4d   \u56fa\u5b9a<\/p>\n<\/li>\n<\/ul>\n<h3>\u76f8\u5bf9\u5b9a\u4f4d\u3010\u76f8\u5bf9\u4e8e\u81ea\u5df1\u3011<\/h3>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812200740355.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812200740355.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">&lt;div class=&quot;div1&quot;&gt;&lt;\/div&gt;\n.div1{\n    width: 100px;\n    height: 100px;\n    background-color: orangered;\n    position: relative;\n    top: 20px;\n    left: 20px;\n}<\/code><\/pre>\n<h3>\u7edd\u5bf9\u5b9a\u4f4d\u3010\u76f8\u5bf9\u6700\u8fd1\u7684\u4e00\u4e2a\u7236\u5143\u7d20\u3011<\/h3>\n<ul>\n<li>\u4f1a\u4ea7\u751f\u6d6e\u52a8\uff0c\u8131\u79bb\u539f\u6765\u7684\u6587\u6863\u6d41\u3001<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812201815235.png\"  alt=\"\" \/><\/li>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812201815235.png\" alt=\"\" \/><\/li><\/noscript>\n<li>\u6587\u6863\u6d41\u662f\u5426\u9700\u8981\u88ab\u7834\u574f<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">&lt;div class=&quot;main&quot;&gt;\n        &lt;div class=&quot;div1&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n.main{\n    width: 600px;\n    height: 600px;\n    background-color: lightpink;\n    position: relative;\n    top: 20px;\n    left: 20px;\n}\n.div1{\n    width: 100px;\n    height: 100px;\n    background-color: orangered;\n    position: absolute;\n    top: 20px;\n    left: 20px;\n}<\/code><\/pre>\n<ul>\n<li>\n<p>relative\uff1a<\/p>\n<\/li>\n<li>\n<p>\u53ef\u4ee5\u901a\u8fc7 top\/right\/bottom\/left \u79fb\u52a8\u5143\u7d20\u7684\u4f4d\u7f6e\u3002<\/p>\n<\/li>\n<li>\n<p>relative \u53ef\u4ee5\u548c\u6d6e\u52a8\u4e00\u8d77\u4f7f\u7528\u3002<\/p>\n<\/li>\n<li>\n<p>\u8bbe\u7f6e\u76f8\u5bf9\u5b9a\u4f4d\u7684\u5143\u7d20\uff0c\u5b50\u5143\u7d20\u8bbe\u7f6e\u7edd\u5bf9\u5b9a\u4f4d\u4f1a\u53c2\u7167\u5b83\u8fdb\u884c\u4f4d\u7f6e\u504f\u79fb\u3002<\/p>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">div{\nwidth: 100px;\nheight: 100px;\n}\n.div1{\nbackground-color: red;\nleft: 200px;\nposition: absolute;\n}\n.div2{\nbackground-color: yellow;\n\/*left: 200px;\nposition: absolute;*\/\n}\n.div3{\nbackground-color: blue;\n\/*left: 200px;\nposition: absolute;*\/\n}\u53ef\u4ee5 123 \u90fd\u52a0 top: 10px;\nposition:relative \u5219\u4e09\u4e2a\u7ad6\u8d77\u4e00\u8d77\u6392\u5217<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812204152385.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812204152385.png\" alt=\"\" \/><br \/><\/noscript>\ndiv2\u3001div3 \u5982 1 \u4e00\u6837\u3001\u3001\u5219<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812204249856.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812204249856.png\" alt=\"\" \/><\/p><\/noscript>\n<h3>\u7edd\u5bf9\u5b9a\u4f4d\u548c float \u7684\u533a\u522b<\/h3>\n<\/li>\n<li>\n<p>\u7edd\u5bf9\u5b9a\u4f4d\u3002\u6587\u5b57\u4f1a\u906e\u5230 \u7834\u574f\u6587\u6863\u6d41<\/p>\n<\/li>\n<\/ul>\n<p>\u7236\u5143\u7d20<\/p>\n<p>.div0{<br \/>\nheight: 300px;<br \/>\n\/<em>right: 10px;<br \/>\nfloat: left;<\/em>\/<br \/>\nposition: absolute;<br \/>\n}<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812210534608.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812210534608.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>float \u7834\u574f\u6587\u6863\u6d41\uff0c\u4f46\u662f\u662f\u5355\u72ec\u51fa\u73b0\u4e5f\u4ea7\u751f\u4e86\u6d6e\u52a8\u6548\u679c\uff0c\u4e0d\u4f1a<\/li>\n<\/ul>\n<p>.div0{<br \/>\nheight: 300px;<br \/>\nright: 10px;<br \/>\nfloat: left;<br \/>\n\/<em>position: absolute;<\/em>\/<br \/>\n}<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812210801894.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812210801894.png\" alt=\"\" \/><\/p><\/noscript>\n<h3>\u76f8\u5bf9\u5b9a\u4f4d\u548c\u6d6e\u52a8<\/h3>\n<ul>\n<li>float \u4ea7\u751f\u7684\u6d6e\u52a8\u4e0d\u4f1a\u88ab\u5ffd\u7565\u3001\u6587\u5b57\u4f1a\u7ed5\u5f00 div<\/li>\n<li>\u76f8\u5bf9\u5b9a\u4f4d\u8bbe\u7f6e 4 \u4e2a\u8fb9\u8ddd<\/li>\n<\/ul>\n<h3>z-index \u7684\u4f7f\u7528<\/h3>\n<p>\u3010\u91cd\u53e0\u663e\u793a\u3011<br \/>\n<img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812212101205.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812212101205.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">.div1{\n    background-color: red;\n    position: absolute;\n    top: 20px;\n    left: 100px;\n    z-index: 10;\n}\n.div2{\n    background-color: yellow;\n    position: absolute;\n    top: 40px;\n    left: 120px;\n    z-index: 50;\n}\n.div3{\n    background-color: blue;\n    position: absolute;\n    top: 60px;\n    left: 140px;\n    z-index: 30;&lt;!--\u500d\u6570--&gt;\n}<\/code><\/pre>\n<h3>\u56fa\u5b9a\u5b9a\u4f4d<\/h3>\n<ul>\n<li>\u76f8\u5bf9\u4e8e\u6e38\u89c8\u5668\u7a97\u53e3\u8fdb\u884c\u5b9a\u4f4d<\/li>\n<li>\u4e3b\u8981\u4ee3\u7801\uff1aposition:fixed<\/li>\n<li>\u5b9e\u4f8b\uff1a\u6f14\u793a div \u76f8\u5bf9\u6e38\u89c8\u5668\u4f4d\u7f6e\u4e0d\u6539\u53d8\u7684\u6548\u679c<\/li>\n<li>\u5bf9\u8054\u5f0f\n<pre class=\"prettyprint linenums\" ><code class=\"language-html\">&lt;div class=&quot;div1&quot;&gt;\u6155\u8bfe\u7f51&lt;\/div&gt;\n&lt;div class=&quot;div2&quot;&gt;\n   &lt;p&gt;\n        \u5e72\u996d\u5e72\u996d\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u8fc7\u8fc7\u8fc7\u8fc7\u8fc7\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u5e72\u996d\u5e72\u996d\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u8fc7\u8fc7\u8fc7\u8fc7\u8fc7\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u5e72\u996d\u5e72\u996d\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u8fc7\u8fc7\u8fc7\u8fc7\u8fc7\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u82e5\u5e72\u996d\u5e72\u996d\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u591a\u8fc7\u8fc7\u8fc7\n   &lt;\/p&gt;\u590d\u5236\u7c98\u8d34\n&lt;\/p&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;div3&quot;&gt;\u6155\u8bfe\u7f51&lt;\/div&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code class=\"language-css\">.div1{\n    width: 5%;\n    height: 100px;\n    position: fixed;\n    top: 200px;\n    left: 2%;\n}\n.div2{\n    width: 80%;\n    \/*height: 100px;*\/\n    position: relative;\n    left: 10%;\n}\n.div3{\n    width: 5%;\n    height: 100px;\n    position: fixed;\n    top: 200px;\n    right: 2%;\n}<\/code><\/pre>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812213700189.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2021\/08\/image-20210812213700189.png\" alt=\"\" \/><\/p><\/noscript>\n","protected":false},"excerpt":{"rendered":"<p>\u5b9a\u4f4d \u7edd\u5bf9\u5b9a\u4f4d absolute \u4e0d\u5360\u4f4d\u7f6e\u5b8c\u5168\u6d6e\u52a8\uff0c\u76f8\u5bf9\u5b9a\u4f4d relative \u4f1a\u5360\u6709\u4f4d\u7f6e\u3002 position [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1173","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1173","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1173"}],"version-history":[{"count":1,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1173\/revisions"}],"predecessor-version":[{"id":4109,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/1173\/revisions\/4109"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}