diff --git a/.changeset/sharp-bees-worry.md b/.changeset/sharp-bees-worry.md
new file mode 100644
index 0000000000..472c23e2f1
--- /dev/null
+++ b/.changeset/sharp-bees-worry.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: incorrect top style of x-foldview-slot-ng if the toolbar is wrapped in lynx-wrapper
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
index ff3200cf98..76d62de40d 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewHeaderNg.ts
@@ -6,6 +6,7 @@
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver, type XFoldviewNg } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 
 @Component<typeof XFoldviewHeaderNg>(
   'x-foldview-header-ng',
@@ -14,12 +15,18 @@ import { resizeObserver, type XFoldviewNg } from './XFoldviewNg.js';
   ],
 )
 export class XFoldviewHeaderNg extends HTMLElement {
+  #parentResizeObserver: ResizeObserver | undefined = undefined;
   connectedCallback() {
-    (this.parentElement as XFoldviewNg | null)?.[resizeObserver]?.observe(this);
+    const parentElement = getCombinedDirectParentElement<XFoldviewNg>(
+      this,
+      'X-FOLDVIEW-NG',
+    );
+    this.#parentResizeObserver = parentElement?.[resizeObserver];
+    this.#parentResizeObserver?.observe(this);
   }
 
   dispose() {
-    (this.parentElement as XFoldviewNg | null)?.[resizeObserver]?.unobserve(
+    this.#parentResizeObserver?.unobserve(
       this,
     );
   }
diff --git a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
index ccc7ddfef3..ecb370cbcb 100644
--- a/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
+++ b/packages/web-platform/web-elements/src/XFoldViewNg/XFoldviewToolbarNg.ts
@@ -6,16 +6,24 @@
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver, type XFoldviewNg } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 
 @Component<typeof XFoldviewToolbarNg>('x-foldview-toolbar-ng', [
   CommonEventsAndMethods,
 ])
 export class XFoldviewToolbarNg extends HTMLElement {
+  #parentResizeObserver: ResizeObserver | undefined = undefined;
   connectedCallback() {
-    (this.parentElement as XFoldviewNg | null)?.[resizeObserver]?.observe(this);
+    const parentElement = getCombinedDirectParentElement<XFoldviewNg>(
+      this,
+      'X-FOLDVIEW-NG',
+    );
+    this.#parentResizeObserver = parentElement?.[resizeObserver];
+    this.#parentResizeObserver?.observe(this);
   }
+
   dispose() {
-    (this.parentElement as XFoldviewNg | null)?.[resizeObserver]?.unobserve(
+    this.#parentResizeObserver?.unobserve(
       this,
     );
   }
diff --git a/packages/web-platform/web-elements/src/common/getCombinedParentElement.ts b/packages/web-platform/web-elements/src/common/getCombinedParentElement.ts
new file mode 100644
index 0000000000..a3a0edc4ce
--- /dev/null
+++ b/packages/web-platform/web-elements/src/common/getCombinedParentElement.ts
@@ -0,0 +1,13 @@
+export const getCombinedDirectParentElement = <T extends HTMLElement>(
+  element: HTMLElement,
+  parentTagName: string,
+): T | undefined => {
+  let parentElement: T | null = element.parentElement as T | null;
+  if (parentElement?.tagName === 'LYNX-WRAPPER') {
+    parentElement = parentElement.parentElement as T | null;
+  }
+  if (parentElement?.tagName === parentTagName) {
+    return parentElement;
+  }
+  return;
+};
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts b/packages/web-platform/web-tests/tests/web-elements.spec.ts
index 207670e1d3..59256ea0f1 100644
--- a/packages/web-platform/web-tests/tests/web-elements.spec.ts
+++ b/packages/web-platform/web-tests/tests/web-elements.spec.ts
@@ -830,6 +830,14 @@ test.describe('web-elements test suite', () => {
       await gotoWebComponentPage(page, title);
       await diffScreenShot(page, title, '300px-inf');
     });
+    test('x-foldview-ng/basic-toolbar-in-lynx-wrapper', async ({
+      page,
+      browserName,
+    }, { title }) => {
+      await gotoWebComponentPage(page, title);
+      await wait(500);
+      expect(page.locator('x-foldview-slot-ng')).toHaveCSS('top', '200px');
+    });
     test('x-foldview-ng/size-parent-grow-children-specific', async ({
       page,
       browserName,
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-toolbar-in-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-toolbar-in-lynx-wrapper.html
new file mode 100644
index 0000000000..cb0b3c84f7
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-toolbar-in-lynx-wrapper.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- Copyright 2023 The Lynx Authors. All rights reserved.
+Licensed under the Apache License Version 2.0 that can be found in the
+LICENSE file in the root directory of this source tree. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>web playground</title>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="default" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="portrait" name="screen-orientation">
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    >
+    <meta content="portrait" name="x5-orientation" />
+    <link
+      href="/node_modules/@lynx-js/web-elements/index.css"
+      rel="stylesheet"
+    />
+    <link
+      href="/web-elements.css"
+      rel="stylesheet"
+    />
+
+    <style>
+    x-view {
+      width: 100%;
+      height: 100px;
+    }
+    </style>
+  </head>
+
+  <body>
+    <script src="/web-elements.js" defer></script>
+    <x-view
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
+    >
+      <x-foldview-ng
+        style="width: 80%; height: 600px; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
+      >
+        <lynx-wrapper>
+          <x-foldview-toolbar-ng
+            style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; flex-shrink: 0; width: 70%; background-color: cadetblue"
+          >
+          </x-foldview-toolbar-ng>
+        </lynx-wrapper>
+        <x-foldview-header-ng
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
+        >
+          <x-view style="background-color: aqua; width: 95%"></x-view>
+        </x-foldview-header-ng>
+        <x-foldview-slot-ng
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex-shrink: 0; flex-direction: column; background-color: salmon"
+        >
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
+          </scroll-view>
+        </x-foldview-slot-ng>
+      </x-foldview-ng>
+    </x-view>
+  </body>
+</html>