{"id":162,"date":"2025-11-24T16:00:03","date_gmt":"2025-11-24T08:00:03","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=162"},"modified":"2025-11-24T16:00:03","modified_gmt":"2025-11-24T08:00:03","slug":"css%e4%b8%ad%e7%9a%84static%e3%80%81relative%e3%80%81absolute%e3%80%81fixed%e3%80%81sticky%e7%9a%84%e5%ba%94%e7%94%a8%e4%b8%8e%e8%af%a6%e7%bb%86%e5%af%b9%e6%af%94","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css%e4%b8%ad%e7%9a%84static%e3%80%81relative%e3%80%81absolute%e3%80%81fixed%e3%80%81sticky%e7%9a%84%e5%ba%94%e7%94%a8%e4%b8%8e%e8%af%a6%e7%bb%86%e5%af%b9%e6%af%94\/","title":{"rendered":"CSS\u4e2d\u7684Static\u3001Relative\u3001Absolute\u3001Fixed\u3001Sticky\u7684\u5e94\u7528\u4e0e\u8be6\u7ec6\u5bf9\u6bd4"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>CSS \u4e2d\u4e94\u79cd\u5b9a\u4f4d\u65b9\u5f0f\uff08position\uff09\u8be6\u89e3<\/strong>\uff0c\u5305\u62ec\u5b9a\u4e49\u3001\u7279\u70b9\u3001\u5e94\u7528\u573a\u666f\u548c\u5bf9\u6bd4\u8868\uff0c\u65b9\u4fbf\u7406\u89e3\u548c\u5b9e\u9645\u5e94\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">CSS \u5b9a\u4f4d\uff08Position\uff09\u8be6\u89e3\uff1aStatic \/ Relative \/ Absolute \/ Fixed \/ Sticky<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 static\uff08\u9ed8\u8ba4\u5b9a\u4f4d\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9a\u4e49<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5143\u7d20\u6309\u7167 <strong>\u6587\u6863\u6d41<\/strong> \u6392\u5217\uff0c\u5373\u666e\u901a\u6d41\u5e03\u5c40\u3002<\/li>\n\n\n\n<li><code>top<\/code>\u3001<code>right<\/code>\u3001<code>bottom<\/code>\u3001<code>left<\/code> \u5c5e\u6027 <strong>\u65e0\u6548<\/strong>\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7279\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9ed8\u8ba4\u503c\uff0c\u5757\u7ea7\u5143\u7d20\u7eb5\u5411\u6392\u5217\uff0c\u884c\u5185\u5143\u7d20\u6c34\u5e73\u6392\u5217\u3002<\/li>\n\n\n\n<li>\u4e0d\u8131\u79bb\u6587\u6863\u6d41\uff0c\u5176\u4ed6\u5143\u7d20\u4e0d\u4f1a\u8986\u76d6\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e94\u7528<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u666e\u901a\u6587\u672c\u3001\u6807\u9898\u3001\u6bb5\u843d\u5e03\u5c40\u3002<\/li>\n\n\n\n<li>\u6240\u6709\u4e0d\u9700\u8981\u7279\u522b\u4f4d\u7f6e\u8c03\u6574\u7684\u5143\u7d20\u3002<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\np {\n  position: static; \/* \u9ed8\u8ba4\uff0c\u53ef\u7701\u7565 *\/\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 relative\uff08\u76f8\u5bf9\u5b9a\u4f4d\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9a\u4e49<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5143\u7d20 <strong>\u76f8\u5bf9\u4e8e\u81ea\u8eab\u539f\u59cb\u4f4d\u7f6e<\/strong> \u504f\u79fb\u3002<\/li>\n\n\n\n<li>\u8131\u79bb\u6587\u6863\u6d41\uff1f<strong>\u4e0d\u8131\u79bb<\/strong>\uff0c\u5360\u7528\u539f\u59cb\u7a7a\u95f4\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7279\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>top\/right\/bottom\/left<\/code> \u53ef\u4ee5\u79fb\u52a8\u5143\u7d20\u3002<\/li>\n\n\n\n<li>\u539f\u59cb\u7a7a\u95f4\u4ecd\u5360\u7528\uff0c\u5f71\u54cd\u5176\u4ed6\u5143\u7d20\u5e03\u5c40\u3002<\/li>\n\n\n\n<li>\u5e38\u7528\u4f5c <strong>\u7236\u5bb9\u5668\u7684\u53c2\u8003\u70b9<\/strong>\uff0c\u65b9\u4fbf\u5b50\u5143\u7d20\u7edd\u5bf9\u5b9a\u4f4d\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e94\u7528<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5fae\u8c03\u4f4d\u7f6e\uff08\u8f7b\u5fae\u79fb\u52a8\uff09<\/li>\n\n\n\n<li>\u4e3a\u7edd\u5bf9\u5b9a\u4f4d\u5b50\u5143\u7d20\u63d0\u4f9b\u53c2\u8003\uff08\u7236\u5143\u7d20 <code>position: relative<\/code>\uff09<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.box {\n  position: relative;\n  top: 10px;\n  left: 20px;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 absolute\uff08\u7edd\u5bf9\u5b9a\u4f4d\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9a\u4e49<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5143\u7d20 <strong>\u8131\u79bb\u6587\u6863\u6d41<\/strong>\uff0c\u4e0d\u5360\u636e\u539f\u7a7a\u95f4\u3002<\/li>\n\n\n\n<li>\u76f8\u5bf9\u4e8e <strong>\u6700\u8fd1\u7684\u5df2\u5b9a\u4f4d\u7956\u5148\u5143\u7d20<\/strong>\uff08\u975e static\uff09\u5b9a\u4f4d\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7279\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8131\u79bb\u6d41\uff0c\u5176\u4ed6\u5143\u7d20\u4e0d\u4f1a\u53d7\u5f71\u54cd\u3002<\/li>\n\n\n\n<li>\u53ef\u53e0\u52a0\u3001\u81ea\u7531\u5b9a\u4f4d\u3002<\/li>\n\n\n\n<li>\u82e5\u6ca1\u6709\u5df2\u5b9a\u4f4d\u7236\u5143\u7d20\uff0c\u5219\u76f8\u5bf9\u4e8e <strong>html\/body<\/strong> \u5b9a\u4f4d\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e94\u7528<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5f39\u7a97\u3001\u63d0\u793a\u6846\u3001\u89d2\u6807\u3002<\/li>\n\n\n\n<li>\u4e0b\u62c9\u83dc\u5355\u3001\u60ac\u6d6e\u6309\u94ae\u3002<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.container {\n  position: relative;\n}\n.badge {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 fixed\uff08\u56fa\u5b9a\u5b9a\u4f4d\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9a\u4e49<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5143\u7d20 <strong>\u8131\u79bb\u6587\u6863\u6d41<\/strong>\uff0c\u76f8\u5bf9\u4e8e <strong>\u89c6\u53e3\uff08viewport\uff09\u56fa\u5b9a<\/strong>\u3002<\/li>\n\n\n\n<li>\u6eda\u52a8\u9875\u9762\uff0c\u5143\u7d20\u4fdd\u6301\u5728\u56fa\u5b9a\u4f4d\u7f6e\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7279\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5e38\u7528\u4e8e\u5bfc\u822a\u680f\u3001\u56de\u5230\u9876\u90e8\u6309\u94ae\u3002<\/li>\n\n\n\n<li>\u5360\u636e\u72ec\u7acb\u5c42\u7ea7\uff0c\u4e0d\u5f71\u54cd\u666e\u901a\u6587\u6863\u6d41\u3002<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e94\u7528<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9876\u90e8\/\u5e95\u90e8\u56fa\u5b9a\u5bfc\u822a<\/li>\n\n\n\n<li>\u60ac\u6d6e\u6309\u94ae\u3001\u901a\u77e5\u6761<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n.back-to-top {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 sticky\uff08\u7c98\u6027\u5b9a\u4f4d\uff09<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9a\u4e49<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7ed3\u5408 <strong>relative + fixed<\/strong> \u7279\u6027\u3002<\/li>\n\n\n\n<li>\u5143\u7d20\u5728 <strong>\u7236\u5bb9\u5668\u8303\u56f4\u5185\u6eda\u52a8<\/strong>\u65f6\uff1a\n<ul class=\"wp-block-list\">\n<li>\u672a\u6eda\u52a8\u5230\u9608\u503c\uff1a\u8868\u73b0\u4e3a relative<\/li>\n\n\n\n<li>\u6eda\u52a8\u5230\u9608\u503c\uff1a\u8868\u73b0\u4e3a fixed<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u7279\u70b9<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4e0d\u8131\u79bb\u6587\u6863\u6d41<\/li>\n\n\n\n<li>\u7236\u5bb9\u5668\u9650\u5236\u4e86 sticky \u8303\u56f4<\/li>\n\n\n\n<li>\u517c\u5bb9\u6027\u8f83\u597d\uff0c\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u5e94\u7528<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u8868\u5934\u7c98\u6027\u56fa\u5b9a<\/li>\n\n\n\n<li>\u5de6\u4fa7\u5bfc\u822a\u6761\u968f\u6eda\u52a8\u505c\u7559<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nthead th {\n  position: sticky;\n  top: 0;\n  background: #fff;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6\ufe0f\u20e3 \u4e94\u79cd\u5b9a\u4f4d\u5bf9\u6bd4\u8868<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u5c5e\u6027<\/th><th>\u5360\u7528\u6587\u6863\u6d41<\/th><th>\u504f\u79fb\u884c\u4e3a<\/th><th>\u53c2\u8003\u70b9<\/th><th>\u5178\u578b\u5e94\u7528<\/th><\/tr><\/thead><tbody><tr><td>static<\/td><td>\u662f<\/td><td>\u65e0\u6548<\/td><td>\u6587\u6863\u6d41<\/td><td>\u666e\u901a\u6bb5\u843d\u3001\u6807\u9898<\/td><\/tr><tr><td>relative<\/td><td>\u662f<\/td><td>\u76f8\u5bf9\u81ea\u8eab\u504f\u79fb<\/td><td>\u81ea\u8eab\u539f\u4f4d\u7f6e<\/td><td>\u5fae\u8c03\u3001\u7236\u5bb9\u5668\u53c2\u8003<\/td><\/tr><tr><td>absolute<\/td><td>\u5426<\/td><td>\u76f8\u5bf9\u7236\u5143\u7d20\u504f\u79fb<\/td><td>\u6700\u8fd1\u5df2\u5b9a\u4f4d\u7236\u5143\u7d20<\/td><td>\u5f39\u7a97\u3001\u89d2\u6807\u3001\u56fe\u6807\u4f4d\u7f6e<\/td><\/tr><tr><td>fixed<\/td><td>\u5426<\/td><td>\u76f8\u5bf9\u89c6\u53e3\u504f\u79fb<\/td><td>\u89c6\u53e3<\/td><td>\u9876\u90e8\/\u5e95\u90e8\u56fa\u5b9a\u5bfc\u822a\u3001\u60ac\u6d6e\u6309\u94ae<\/td><\/tr><tr><td>sticky<\/td><td>\u662f<\/td><td>\u6eda\u52a8\u5230\u9608\u503c\u540e\u56fa\u5b9a<\/td><td>\u6700\u8fd1\u6eda\u52a8\u7956\u5148\u5bb9\u5668<\/td><td>\u8868\u5934\u7c98\u6027\u3001\u6eda\u52a8\u83dc\u5355<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd39 \u603b\u7ed3\u5e94\u7528\u5efa\u8bae<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>static<\/strong>\uff1a\u9ed8\u8ba4\u4f7f\u7528\uff0c\u666e\u901a\u6587\u6863\u6d41\u5e03\u5c40\u3002<\/li>\n\n\n\n<li><strong>relative<\/strong>\uff1a\u5fae\u8c03\u5143\u7d20\u4f4d\u7f6e\u3001\u4e3a\u7edd\u5bf9\u5b9a\u4f4d\u5b50\u5143\u7d20\u505a\u53c2\u8003\u3002<\/li>\n\n\n\n<li><strong>absolute<\/strong>\uff1a\u8131\u79bb\u6587\u6863\u6d41\u81ea\u7531\u5b9a\u4f4d\uff0c\u5e38\u505a\u5f39\u7a97\u3001\u89d2\u6807\u3002<\/li>\n\n\n\n<li><strong>fixed<\/strong>\uff1a\u8131\u79bb\u6587\u6863\u6d41\u76f8\u5bf9\u4e8e\u89c6\u53e3\u56fa\u5b9a\uff0c\u9002\u5408\u5bfc\u822a\/\u6309\u94ae\u3002<\/li>\n\n\n\n<li><strong>sticky<\/strong>\uff1a\u7ed3\u5408 relative \u548c fixed\uff0c\u505a\u7c98\u6027\u5bfc\u822a\u3001\u8868\u5934\u3002<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u963f\u6770\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd CSS \u4e2d\u4e94\u79cd\u5b9a\u4f4d\u65b9\u5f0f\uff08position\uff09\u8be6\u89e3\uff0c\u5305\u62ec&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/24\/css%e4%b8%ad%e7%9a%84static%e3%80%81relative%e3%80%81absolute%e3%80%81fixed%e3%80%81sticky%e7%9a%84%e5%ba%94%e7%94%a8%e4%b8%8e%e8%af%a6%e7%bb%86%e5%af%b9%e6%af%94\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-162","post","type-post","status-publish","format-standard","hentry","category-css"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"predecessor-version":[{"id":163,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/162\/revisions\/163"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}