docs(Layout): use sticky instead of fixed (#52411)

* docs(Layout): use sticky instead of fixed

* test: update snap

---------

Co-authored-by: thinkasany <480968828@qq.com>

components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1361,7 +1361,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
+    style="overflow: auto; height: 100vh; position: sticky; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
   >
     <div
       class="ant-layout-sider-children"
@@ -1776,7 +1776,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
   </aside>
   <div
     class="ant-layout"
-    style="margin-inline-start: 200px;"
   >
     <header
       class="ant-layout-header"

components/layout/__tests__/__snapshots__/demo.test.ts.snap

@@ -755,7 +755,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+    style="overflow:auto;height:100vh;position:sticky;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="ant-layout-sider-children"
@@ -1026,7 +1026,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
   </aside>
   <div
     class="ant-layout"
-    style="margin-inline-start:200px"
   >
     <header
       class="ant-layout-header"

components/layout/demo/fixed-sider.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-When dealing with long content, a fixed sider can provide a better user experience.
+When dealing with long content, a sticky sider can provide a better user experience.

components/layout/demo/fixed-sider.tsx

@@ -17,7 +17,7 @@ const { Header, Content, Footer, Sider } = Layout;
 const siderStyle: React.CSSProperties = {
   overflow: 'auto',
   height: '100vh',
-  position: 'fixed',
+  position: 'sticky',
   insetInlineStart: 0,
   top: 0,
   bottom: 0,
@@ -51,7 +51,7 @@ const App: React.FC = () => {
         <div className="demo-logo-vertical" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
       </Sider>
-      <Layout style={{ marginInlineStart: 200 }}>
+      <Layout>
         <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
           <div

components/layout/demo/fixed.md

@@ -4,4 +4,4 @@
 
 ## en-US
 
-Fixed Header is generally used to fix the top navigation to facilitate page switching.
+Sticky Header is generally used to fix the top navigation to facilitate page switching.