1"use strict";(self.webpackChunkcode_fictionist=self.webpackChunkcode_fictionist||[]).push([[3959],{28453:(e,s,i)=>{i.d(s,{R:()=>r,x:()=>t});var n=i(96540);const d={},c=n.createContext(d);function r(e){const s=n.useContext(c);return n.useMemo((function(){return"function"==typeof e?e(s):{...s,...e}}),[s,e])}function t(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),n.createElement(c.Provider,{value:s},e.children)}},66252:(e,s,i)=>{i.r(s),i.d(s,{assets:()=>l,contentTitle:()=>t,default:()=>x,frontMatter:()=>r,metadata:()=>n,toc:()=>o});const n=JSON.parse('{"id":"series/iThome_2025/day_03","title":"Day03 - CSS \u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5","description":"\u4eca\u5929\u4e0d\u6703\u6709 code\uff0c\u5594\u8036\uff01","source":"@site/docs/series/02-iThome_2025/03-day_03.mdx","sourceDirName":"series/02-iThome_2025","slug":"/series/iThome_2025/day_03","permalink":"/docs/series/iThome_2025/day_03","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"CSS","permalink":"/docs/tags/css"},{"inline":true,"label":"px","permalink":"/docs/tags/px"},{"inline":true,"label":"em","permalink":"/docs/tags/em"},{"inline":true,"label":"rem","permalink":"/docs/tags/rem"},{"inline":true,"label":"vh","permalink":"/docs/tags/vh"},{"inline":true,"label":"vw","permalink":"/docs/tags/vw"},{"inline":true,"label":"position","permalink":"/docs/tags/position"}],"version":"current","lastUpdatedAt":1766374113000,"sidebarPosition":3,"frontMatter":{"title":"Day03 - CSS \u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5","sidebar_label":"Day03 - CSS \u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5","tags":["CSS","px","em","rem","vh","vw","position"],"keywords":["CSS","px","em","rem","vh","vw","position"]},"sidebar":"series","previous":{"title":"Day02 - \u8a92\u9017\uff0c\u600e\u9ebc\u58d3\u4e0d\u904e\u5b83\u7684\u6a23\u5f0f\u5462\uff1f","permalink":"/docs/series/iThome_2025/day_02"},"next":{"title":"Day04 - \u5927\u5bb6\u90fd\u5728\u8aaa\u7684\u8b8a\u6578\u4f5c\u7528\u57df\u548c\u63d0\u5347\u5230\u5e95\u8aaa\u4e86\u4ec0\u9ebc\u6545\u4e8b\uff1f","permalink":"/docs/series/iThome_2025/day_04"}}');var d=i(74848),c=i(28453);const r={title:"Day03 - CSS \u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5",sidebar_label:"Day03 - CSS \u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5",tags:["CSS","px","em","rem","vh","vw","position"],keywords:["CSS","px","em","rem","vh","vw","position"]},t=void 0,l={},o=[{value:"\u55ae\u4f4d\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",id:"\u55ae\u4f4d\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",level:2},{value:"\u4f4d\u7f6e\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",id:"\u4f4d\u7f6e\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",level:2},{value:"\u6240\u4ee5\u61c2\u4e86\u300c\u76f8\u5c0d\u300d\u6982\u5ff5\u53ef\u4ee5\u5e79\u561b\uff1f",id:"\u6240\u4ee5\u61c2\u4e86\u76f8\u5c0d\u6982\u5ff5\u53ef\u4ee5\u5e79\u561b",level:2}];function h(e){const s={a:"a",admonition:"admonition",blockquote:"blockquote",br:"br",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,c.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)(s.p,{children:["\u4eca\u5929\u4e0d\u6703\u6709 code\uff0c\u5594\u8036\uff01",(0,d.jsx)(s.br,{}),"\n","\u4eca\u5929\u4f86\u804a\u804a\u4e00\u500b\u6211\u66fe\u7d93\u88ab\u554f\u904e\u7684\u8d85\u76f4\u63a5\u554f\u984c\uff1a"]}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.code,{children:"px"}),"\u3001",(0,d.jsx)(s.code,{children:"em"}),"\u3001",(0,d.jsx)(s.code,{children:"rem"})," \u9019\u4e9b\u5c3a\u5bf8\u55ae\u4f4d\u6709\u4ec0\u9ebc\u5dee\u5225\uff1f"]}),"\n"]}),"\n",(0,d.jsxs)(s.p,{children:["\u5176\u5be6\u9019\u554f\u984c\u5c31\u53ea\u662f\u5f88\u55ae\u7d14\u5730\u5728\u554f\u5c3a\u5bf8\u55ae\u4f4d\u7684\u5dee\u5225\u800c\u5df2\uff0c\u4f46\u6211\u8981\u8aaa\u7684\u662f\uff0c\u5176\u5be6\u50cf ",(0,d.jsx)(s.code,{children:"em"})," \u8ddf ",(0,d.jsx)(s.code,{children:"rem"})," \u5c31\u96b1\u85cf\u8457 CSS \u4e00\u500b\u6f5b\u5728\u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5\u3002",(0,d.jsx)(s.br,{}),"\n","\u300c\u76f8\u5c0d\u300d\u9019\u500b\u8a5e\u5728\u8fad\u5178\u88e1\u662f\u300c\u6bd4\u8f03\u300d\u3001\u300c\u5c0d\u61c9\u300d\u7684\u610f\u601d\uff0c\u7528\u5728\u67d0 A \u4e0a\uff0c\u90a3\u4e00\u5b9a\u6703\u6709\u67d0 B \u6703\u88ab\u62ff\u51fa\u4f86\u7d66\u4ed6\u6bd4\u8f03\u6216\u5c0d\u61c9\u3002",(0,d.jsx)(s.br,{}
1),"\n","\u6211\u77e5\u9053\u9084\u6c92\u6709\u4eba\u7279\u5225\u5beb\u4e00\u7bc7\u6587\u5f37\u8abf CSS \u7684\u76f8\u5c0d\u6982\u5ff5 (\u6216\u662f\u6211\u9084\u6c92\u8b80\u904e)\uff0c\u4f46\u6211\u89ba\u5f97\u82e5\u80fd\u91cd\u8996\u9019\u500b\u6982\u5ff5\uff0c\u5176\u5be6\u6709\u52a9\u65bc\u91d0\u6e05\u4e00\u4e9b CSS \u5c6c\u6027\u8207\u55ae\u4f4d\u4e0a\u7684\u5dee\u7570\u3002"]}),"\n",(0,d.jsx)(s.h2,{id:"\u55ae\u4f4d\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",children:"\u55ae\u4f4d\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5"}),"\n",(0,d.jsx)(s.p,{children:"\u56de\u6b78\u4e00\u958b\u59cb\u7684\u90a3\u500b\u554f\u984c\uff1a"}),"\n",(0,d.jsxs)(s.blockquote,{children:["\n",(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.code,{children:"px"}),"\u3001",(0,d.jsx)(s.code,{children:"em"}),"\u3001",(0,d.jsx)(s.code,{children:"rem"})," \u9019\u4e9b\u5c3a\u5bf8\u55ae\u4f4d\u6709\u4ec0\u9ebc\u5dee\u5225\uff1f"]}),"\n"]}),"\n",(0,d.jsxs)(s.p,{children:["\u5148\u4e0d\u770b ",(0,d.jsx)(s.code,{children:"px"}),"\uff0c\u9019\u73a9\u610f\u5152\u662f\u5c3a\u5bf8\u55ae\u4f4d\u7684\u6839\uff0c\u5b83\u4e0d\u6703\u6709\u4efb\u4f55\u53c3\u7167\u3001\u4efb\u4f55\u5c0d\u61c9\uff0c\u63db\u53e5\u8a71\u8aaa\u4ed6\u662f\u5c6c\u65bc\u4e00\u500b\u300c\u7d55\u5c0d\u300d\u7684\u6982\u5ff5\u3002",(0,d.jsx)(s.br,{}),"\n","\u4f46 ",(0,d.jsx)(s.code,{children:"em"})," \u8ddf ",(0,d.jsx)(s.code,{children:"rem"})," \u5c31\u4e0d\u4e00\u6a23\u4e86\uff0c\u9019\u5169\u500b\u5c3a\u5bf8\u55ae\u4f4d\u90fd\u6703\u6709\u4e00\u500b\u53c3\u7167\u7684\u5c0d\u8c61\uff0c\u6240\u4ee5\u9019\u662f\u4e00\u500b\u300c\u76f8\u5c0d\u300d\u7684\u6982\u5ff5\u3002",(0,d.jsx)(s.br,{}),"\n","\u90a3\u4ed6\u5011\u53c3\u7167\u4ec0\u9ebc\u5462\uff1f"]}),"\n",(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{children:"\u5c3a\u5bf8\u55ae\u4f4d"}),(0,d.jsx)(s.th,{children:"\u53c3\u7167\u5c0d\u8c61"}),(0,d.jsx)(s.th,{children:"example"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"em"})}),(0,d.jsx)(s.td,{children:"\u53c3\u7167 parent element \u7684\u5c3a\u5bf8"}),(0,d.jsxs)(s.td,{children:["parent element \u7684 ",(0,d.jsx)(s.code,{children:"font-size"})," \u8a2d\u70ba 20px \u6642\uff0c\u5247 child element \u7684 ",(0,d.jsx)(s.code,{children:"1em"})," \u5c31\u662f 20px\u3001",(0,d.jsx)(s.code,{children:"2em"})," \u5c31\u662f 40px"]})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"rem"})}),(0,d.jsx)(s.td,{children:"\u53c3\u7167 root element \u7684\u5c3a\u5bf8"}),(0,d.jsxs)(s.td,{children:["root element \u7684 ",(0,d.jsx)(s.code,{children:"font-size"})," \u8a2d\u70ba 16px \u6642\uff0c\u5247\u4efb\u4f55\u5143\u7d20\u7684 ",(0,d.jsx)(s.code,{children:"1rem"})," \u5c31\u662f 16px\u3001",(0,d.jsx)(s.code,{children:"2rem"})," \u5c31\u662f 32px"]})]})]})]}),"\n",(0,d.jsx)(s.admonition,{type:"tip",children:(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.code,{children:"rem"})," \u7684 ",(0,d.jsx)(s.code,{children:"r"})," \u7576\u4f5c root \u4f86\u8a18\u3002"]})}),"\n",(0,d.jsxs)(s.p,{children:["\u90a3\u63d0\u5230\u5c3a\u5bf8\u55ae\u4f4d\uff0c\u9084\u6709\u4e00\u500b\u5927\u5bb6\u5f88\u611b\u7528\u7684 ",(0,d.jsx)(s.code,{children:"vh"})," \u8ddf ",(0,d.jsx)(s.code,{children:"vw"}),"\uff0c\u9019\u5169\u500b\u55ae\u4f4d\u6211\u4e5f\u6703\u628a\u4ed6\u5011\u7576\u4f5c\u662f\u76f8\u5c0d\u7684\u6982\u5ff5\u3002",(0,d.jsx)(s.br,{}),"\n","\u56e0\u70ba\u4ed6\u5011\u53c3\u7167\u7684\u662f viewport \u7684\u5c3a\u5bf8\uff0c\u800c viewport \u5176\u5be6\u6703\u96a8\u8457\u700f\u89bd\u5668\u7684\u5927\u5c0f\u800c\u6539\u8b8a\uff0c\u6c92\u6709\u4e00\u500b\u56fa\u5b9a\u7684\u503c\uff0c\u6240\u4ee5\u6982\u5ff5\u4e0a\u4ed6\u5011\u4e5f\u662f\u300c\u76f8\u5c0d\u300d\u7684\u3002"]}),"\n",(0,d.jsxs)(s.ol,{children:["\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.code,{children:"vh"})," (viewport height)\uff1a1vh \u7b49\u65bc viewport \u9ad8\u5ea6\u7684 1%\u3002"]}),"\n",(0,d.jsxs)(s.li,{children:[(0,d.jsx)(s.code,{children:"vw"})," (viewport width)\uff1a1vw \u7b49\u65bc viewport \u5bec\u5ea6\u7684 1%\u3002"]}),"\n"]}),"\n",(0,d.jsx)(s.admonition,{type:"warning",children:(0,d.jsxs)(s.p,{children:[(0,d.jsx)(s.code,{children:"vh"})," \u8ddf ",(0,d.jsx)(s.code,{children:"vw"}
1)," \u4e0d\u80fd\u6feb\u7528\uff0c\u6bd4\u5982\u770b\u904e\u5b57\u9ad4\u5927\u5c0f\u4f7f\u7528\u53c3\u7167 viewport \u7684\u9019\u5169\u500b\u55ae\u4f4d\uff0c\u5594\uff0c\u9019\u7c21\u76f4\u662f\u707d\u96e3\u3002",(0,d.jsx)(s.br,{}),"\n","\u8981\u8a18\u5f97 ",(0,d.jsx)(s.code,{children:"vh"})," \u8ddf ",(0,d.jsx)(s.code,{children:"vw"})," \u53c3\u7167\u7684\u662f viewport\uff0c\u62ff\u4ed6\u5011\u7576\u5b57\u9ad4\u5927\u5c0f\u5f88\u5bb9\u6613\u5c31\u6703\u770b\u5230\u4f60\u7684\u5b57\u9ad4\u597d\u50cf\u53d7\u5230\u9ea5\u6559\u6388\u7684\u8b8a\u5f62\u8853\u4e00\u6a23\uff0c\u958b\u59cb\u51fa\u73fe\u5404\u7a2e\u8b8a\u5f62\u3002"]})}),"\n",(0,d.jsx)(s.h2,{id:"\u4f4d\u7f6e\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5",children:"\u4f4d\u7f6e\u4e0a\u7684\u76f8\u5c0d\u6982\u5ff5"}),"\n",(0,d.jsxs)(s.p,{children:["\u53e6\u4e00\u500b\u9762\u8a66\u4e0a\u5e38\u6703\u554f\u7684\u554f\u984c\u5c31\u662f\u5927\u5bb6\u8033\u719f\u80fd\u8a73\u7684 ",(0,d.jsx)(s.code,{children:"position"}),"\u3002",(0,d.jsx)(s.br,{}),"\n","\u5148\u4f86\u554f\u554f\u5927\u5bb6\u4e00\u5171\u53ef\u4ee5\u8209\u51fa\u5e7e\u500b ",(0,d.jsx)(s.code,{children:"position"})," \u7684\u5c6c\u6027\uff1f"]}),"\n",(0,d.jsx)(s.p,{children:"\u6211\u5011\u4f86\u7a0d\u5fae\u5217\u51fa\u4f86\u770b\u4e00\u4e0b\uff1a"}),"\n",(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{children:(0,d.jsx)(s.code,{children:"position"})}),(0,d.jsx)(s.th,{children:"\u53c3\u7167\u5c0d\u8c61"}),(0,d.jsx)(s.th,{children:"\u8aaa\u660e"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"static"})}),(0,d.jsx)(s.td,{children:"\u7121"}),(0,d.jsxs)(s.td,{children:["element \u5982\u679c\u6c92\u7279\u5225\u8a2d\u5b9a ",(0,d.jsx)(s.code,{children:"position"}),"\uff0c\u90a3\u9810\u8a2d\u5c31\u662f ",(0,d.jsx)(s.code,{children:"static"}),"\uff0c\u6703\u6309\u7167\u5143\u7d20\u9810\u8a2d\u7684\u6392\u5217\u65b9\u5f0f\u986f\u793a\uff08\u9084\u4e0d\u61c2\u5143\u7d20\u9810\u8a2d\u6392\u5217\u7684\u8a71\uff0c\u8d95\u5feb\u53bb\u8907\u7fd2 block & inline element\uff09\u3002\u6b64\u5916\uff0c",(0,d.jsx)(s.code,{children:"static"})," \u7121\u6cd5\u4f7f\u7528 ",(0,d.jsx)(s.code,{children:"top"})," / ",(0,d.jsx)(s.code,{children:"left"})," / ",(0,d.jsx)(s.code,{children:"bottom"})," / ",(0,d.jsx)(s.code,{children:"right"})," \u7b49\u504f\u79fb\u5c6c\u6027\u3002"]})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"relative"})}),(0,d.jsx)(s.td,{children:"\u5143\u7d20\u81ea\u5df1"}),(0,d.jsx)(s.td,{children:"\u6703\u53c3\u7167\u5143\u7d20\u300c\u539f\u672c\u7684\u4f4d\u7f6e\u300d\u9032\u884c\u504f\u79fb\uff0c\u4f46\u5143\u7d20\u5728\u6587\u6d41\u4e2d\u7684\u7a7a\u9593\u4ecd\u7136\u4fdd\u7559\u3002\u7c21\u55ae\u4f86\u8aaa\uff0c\u5c31\u662f\u300c\u8996\u89ba\u4e0a\u79fb\u52d5\u4e86\uff0c\u4f46\u6587\u6d41\u4e0a\u4ecd\u6703\u4fdd\u7559\u5b83\u539f\u5148\u7684\u4f4d\u7f6e\u300d(\u859b\u4e01\u683c\u7684\u504f\u79fb\uff01)\u3002"})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"absolute"})}),(0,d.jsxs)(s.td,{children:["\u6700\u8fd1\u4e00\u500b ",(0,d.jsx)(s.code,{children:"position"})," \u4e0d\u70ba ",(0,d.jsx)(s.code,{children:"static"})," \u7684\u5b9a\u4f4d\u7956\u5148"]}),(0,d.jsxs)(s.td,{children:["\u5143\u7d20\u6703\u5b8c\u5168\u812b\u96e2\u6587\u6d41\uff0c\u4e26\u4f9d\u64da\u6700\u8fd1\u4e00\u500b\u975e ",(0,d.jsx)(s.code,{children:"static"})," \u7684\u7956\u5148\u5143\u7d20\u4f86\u5b9a\u4f4d\u3002For example\uff1a\u82e5\u5143\u7d20 c \u7684\u7236\u5143\u7d20 b \u662f ",(0,d.jsx)(s.code,{children:"static"}),"\uff0c\u800c\u7956\u7236\u5143\u7d20 a \u662f ",(0,d.jsx)(s.code,{children:"relative"}),"\uff0c\u90a3\u9ebc c \u5c31\u6703\u53c3\u7167 a\u3002\u82e5\u4e00\u8def\u5f80\u4e0a\u90fd\u627e\u4e0d\u5230\u53ef\u4ee5\u53c3\u7167\u7684\u7956\u5148\uff0c\u5247\u4ee5 ",(0,d.jsx)(s.code,{children:"<html>"})," \u70ba\u57fa\u6e96\u3002"]})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"fixed"})}),(0,d.jsx)(s.td,{children:"viewport"}),(0,d.jsx)(s.td,{children:"\u5143\u7d20\u6703\u812b\u96e2\u6587\u6d41\uff0c\u4e26\u56fa\u5b9a\u5728 viewport \u4e0a\uff0c\u57fa\u672c\u4e0a\u53ef\u4ee5\u60f3\u50cf\u6210\u7528\u4e00\u6839\u5716\u91d8\u628a\u5143\u7d20\u7d66\u91d8\u5728\u756b\u9762\u4e0a"})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"sticky"})}),(0,d.jsx)(s.td,{children:"\u4e00\u958b\u59cb\u662f\u5143\u7d20\u81ea\u5df1\uff0c\u6efe\u52d5\u5f8c\u662f viewport"}),(0,d.jsxs)(s.td,{children:["\u9019\u662f\u4e00\u500b\u7a0d\u5fae\u6709\u9ede\u795e\u5947\u7684\u5c6c\u6027\uff0c\u5b83\u4e00\u958b\u59cb\u50cf ",(0,d.jsx)(s.code,{children:"relative"}),"\uff0c\u4f46\u6efe\u52d5\u5230\u7279\u5b9a\u4f4d\u7f6e\u5f8c\u6703\u8b8a\u6210 ",(0,d.jsx)(s.code,{children:"fixed"})," \u6548\u679c\uff0c\u9ecf\u5728\u756b\u9762\u4e0a\u3002\u8981\u7279\u5225\u6ce8\u610f\u7684\u662f\uff0c\u5f88\u591a\u4eba ",(0,d.jsx)(s.code,{children:"sticky"})," \u5931\u6548\u662f\u56e0\u70ba\u6f0f\u4e86\u8a2d\u5b9a ",(0,d.jsx)(s.code,{children:"top"}),"\uff08\u6216\u5176\u4ed6\u65b9\u5411\uff09\uff0c\u6216\u662f\u7236\u5143\u7d20\u52a0\u4e86 ",(0,d.jsx)(s.code,{children:"overflow: hidden"})," \u9020\u6210\u6efe\u52d5\u908f\u8f2f\u88ab\u7834\u58de\u3002"]})]})]})]}),"\n",(0,d.jsx)(s.admonition,{type:"tip",children:(0,d.jsxs)(s.p,{children:["\u60f3\u770b ",(0,d.jsx)(s.code,{children:"position"})," \u7bc4\u4f8b\u7684\u53ef\u4ee5\u53c3\u8003\u6211\u5e7e\u5e74\u524d\u5beb\u7684",(0,d.jsx)(s.a,{href:"https://jeremyho.tw/docs/notes/Web_Dev/HTML_CSS/position",children:"\u6587\u7ae0"})]})}),"\n",(0,d.jsxs)(s.p,{children:["\u5f9e\u4e0a\u9762\u6574\u7406\u7684\u8868\u683c\u53ef\u4ee5\u770b\u51fa\uff0c",(0,d.jsx)(s.code,{children:"position"})," \u5c6c\u6027\u9664\u4e86 ",(0,d.jsx)(s.code,{children:"static"})," \u4e4b\u5916\uff0c\u4eba\u4eba\u90fd\u6709\u4e00\u500b\u53c3\u7167\u5c0d\u8c61\uff0c\u5c31\u9023\u6700\u82b1\u5fc3\u7684 ",(0,d.jsx)(s.code,{children:"sticky"})," \u4e5f\u662f\u6709\u5c0d\u8c61\u53ef\u4ee5\u8b8a\u52d5\u8457\u53c3\u7167\u3002",(0,d.jsx)(s.br,{}),"\n","\u9019\u5c31\u662f CSS \u300c\u76f8\u5c0d\u300d\u6982\u5ff5\u5728\u4f4d\u7f6e\u4e0a\u7684\u9ad4\u73fe\u3002"]}),"\n",(0,d.jsx)(s.h2,{id:"\u6240\u4ee5\u61c2\u4e86\u76f8\u5c0d\u6982\u5ff5\u53ef\u4ee5\u5e79\u561b",children:"\u6240\u4ee5\u61c2\u4e86\u300c\u76f8\u5c0d\u300d\u6982\u5ff5\u53ef\u4ee5\u5e79\u561b\uff1f"}),"\n",(0,d.jsxs)(s.p,{children:["\u8aaa\u5be6\u5728\u7684\uff0c\u53ef\u80fd\u4e0d\u80fd\u5e79\u561b\uff0c\u6211\u53ea\u662f\u8a66\u5716\u8b93\u4f60\u900f\u904e\u300c\u76f8\u5c0d\u300d\u7684\u6982\u5ff5\u4f86\u66f4\u6e05\u695a\u5730\u7406\u89e3 CSS \u4e00\u4e9b\u55ae\u4f4d\u8207\u4f4d\u7f6e\u5c6c\u6027\u4e0a\u7684\u6982\u5ff5\u3002",(0,d.jsx)(s.br,{}),"\n","\u7562\u7adf\u9019\u4e00\u584a\u771f\u7684\u5f88\u591a\u4eba\u90fd\u662f\u786c\u8a18\u7684\uff0c\u800c\u6211\u5f88\u4e0d\u559c\u6b61\u7528\u786c\u80cc\u7684\u65b9\u5f0f\u53bb\u8a18\u4e00\u500b\u6709\u539f\u7406\u7684\u6771\u897f\uff0c\u5f88\u5bb9\u6613\u5fd8\u8a18\u3002",(0,d.jsx)(s.br,{}),"\n","\u5be6\u52d9\u4e0a\u6700\u7d93\u5178\u7684 ",(0,d.jsx)(s.code,{children:"position"})," bug \u5c31\u662f\u7528\u4e86 ",(0,d.jsx)(s.code,{children:"absolute"})," \u5f8c\u56b4\u91cd\u8dd1\u7248\uff0c\u9019\u662f\u500b\u7d93\u5178\u554f\u984c\uff0c\u7d93\u5178\u5230\u5df2\u7d93\u8b8a\u6210\u4e86\u57fa\u672c\uff0c\u4f46\u5c31\u662f\u6703\u
16709\u4eba\u9084\u662f debug \u4e0d\u51fa\u70ba\u4ec0\u9ebc\u6703\u5927\u8dd1\u7248\u3002",(0,d.jsx)(s.br,{}),"\n","\u8981\u8aaa\u4ed6\u6c92\u6709\u8a18\u5f97 ",(0,d.jsx)(s.code,{children:"absolute"})," \u7684\u5b9a\u7fa9\u4e5f\u597d\uff0c\u4f46\u6211\u66f4\u50be\u5411\u65bc\u4ed6\u6c92\u6709\u7406\u89e3 ",(0,d.jsx)(s.code,{children:"absolute"})," \u7684\u539f\u7406\u3001\u6c92\u7406\u89e3 ",(0,d.jsx)(s.code,{children:"absolute"})," \u80cc\u5f8c\u90a3\u9700\u8981\u53c3\u7167\u300c\u6700\u8fd1\u4e00\u500b ",(0,d.jsx)(s.code,{children:"position"})," \u4e0d\u70ba ",(0,d.jsx)(s.code,{children:"static"})," \u7684\u5b9a\u4f4d\u7956\u5148\u300d\u7684\u300c\u76f8\u5c0d\u300d\u6982\u5ff5\u3002"]}),"\n",(0,d.jsxs)(s.p,{children:["\u5176\u5be6\u5ffd\u7565\u76f8\u5c0d\u7684\u6982\u5ff5\u4e0d\u770b\uff0c\u55ae\u628a\u9019\u7bc7\u7576\u4f5c\u5c3a\u5bf8\u55ae\u4f4d\u8207 position \u7684\u7c21\u4ecb\u4f86\u770b\u6211\u4e5f\u662f\u6c92\u610f\u898b\u5566~",(0,d.jsx)(s.br,{}),"\n","\u4f46\u5982\u679c\u4f60\u525b\u597d\u6b63\u5728\u5b78 CSS\uff0c\u4e5f\u8a31\u9019\u500b\u300c\u76f8\u5c0d\u300d\u7684\u89c0\u9ede\uff0c\u53ef\u4ee5\u8b93\u4f60\u5728\u4e0b\u6b21 debug \u7684\u6642\u5019\u7d66\u4f60\u4e00\u9ede\u65b9\u5411\uff0c\u5927\u6982\uff1f"]})]})}function x(e={}){const{wrapper:s}={...(0,c.R)(),...e.components};return s?(0,d.jsx)(s,{...e,children:(0,d.jsx)(h,{...e})}):h(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.