当我在iframe中添加一些css时，iframe位置:已修复不起作用

<!-- 父页面 -->
<iframe src="https://example.com/page.html"></iframe>

<!-- iframe内容 -->
<style>
  .fixed-element {
    position: fixed;
    top: 10px;
    left: 10px;
  }
</style>
<div class="fixed-element">Fixed Content</div>

<iframe id="myIframe" src="https://anotherdomain.com/page.html"></iframe>
<script>
  window.addEventListener('message', function(event) {
    if (event.origin !== 'https://anotherdomain.com') return; // 安全检查
    const iframe = document.getElementById('myIframe');
    iframe.contentDocument.body.style.position = 'fixed';
  });
</script>

<script>
  window.parent.postMessage('applyFixedPosition', 'https://example.com');
</script>

<!-- 父页面 -->
<style>
  :root {
    --fixed-position: fixed;
  }
</style>
<iframe src="https://example.com/page.html"></iframe>

<!-- iframe内容 -->
<style>
  .fixed-element {
    position: var(--fixed-position);
    top: 10px;
    left: 10px;
  }
</style>
<div class="fixed-element">Fixed Content</div>