具有固定 position 的子 div 必须在父 div 内

Question

我正在使用一些编辑器插件。 当使用 position 固定的编辑器渲染代码信息时，它会显示在编辑器 div 之外。 它应该在父 div 中渲染。

 <html> <head> </head> <body> <div style="width: 50%; border:1px solid black; overflow: hidden;"> parent <table style="width: 100%; margin:0px 0px 5px 0px; top: 93px; position:fixed; left: 0;display: flex; flex-direction: row; justify-content: center; align-items: center; height: 44px; background-color: #ffbf1e; z-index: 998;"> <tbody> <tr> <td style="width: 100%; padding: 0px; background-color: rgb(255, 191, 30);"> child </td> </tr> </tbody> </table> </div> </body> </html>

Answer 1

不幸的是，CSS 规范要求position:fixed锚定到视口，而不是包含定位元素。 对你来说，这意味着你不能纯粹通过 CSS 来解决它。

使用 javascript 手动删除/替换所有元素的所有固定位置。
使用<iframe>代替 div。 它有自己的视口，因此固定的 position 将相对于父 iframe 边界。

Answer 2

当具有其父元素的元素具有fixed或absolute的 position 而其父元素没有 position 定义子元素时，请遵循body标签的测量，例如，当您定义两个div父子元素和子元素但未将 Z4757FE07FD492A8BEEZEA6A6 设置为两者时在以下示例中，孩子将跟随其父母的测量我将父母width设置为body的50% ，将孩子设置为其父母的100%

 .parent { width: 50%; border: 3px solid black; }.child { width: 100%; height: 20px; background: tomato; }

 <div class="parent"> <div class="child"></div> </div>

但是当我将子级的 position 设置为固定或绝对并将其宽度设置为100%时，宽度将不取决于其父级，而是取决于body

 .parent { width: 50%; border: 3px solid black; }.child { position: fixed; width: 100%; height: 20px; background: tomato; }

 <div class="parent"> <div class="child"></div> </div>

这就是为什么具有fixed或absolute position 的孩子不能依赖其父母，除非您将父母的 position 设置为relative但不会像您没有定义 Z4757FE07FD492A8BE0EA6A760EZ683 那样表现相同

具有固定 position 的子 div 必须在父 div 内

问题描述

2 个解决方案

解决方案1
0 2020-07-07 01:17:55

解决方案2
0 2020-07-07 01:28:36

具有固定 position 的子 div 必须在父 div 内

问题描述

2 个解决方案

解决方案1 0 2020-07-07 01:17:55

解决方案2 0 2020-07-07 01:28:36

解决方案1
0 2020-07-07 01:17:55

解决方案2
0 2020-07-07 01:28:36