CSS - 最小（按高度）<td>的粘性元素在Safari中不起作用答案

【问题标题】：CSS - sticky element in smallest (by height) <td> not working in SafariCSS - 最小（按高度）<td>的粘性元素在Safari中不起作用
【发布时间】：2020-04-10 04:01:33
【问题描述】：

如果将粘性元素放置在最小（按高度）<td> 内，但元素的 position:sticky 和 position:-webkit-sticky 属性在 Safari（桌面和移动）中不起作用。

示例：https://jsfiddle.net/Ldg820c7/3/

<table>
    <tr>
    <td valign = "top">
        <div style="height:1000px; width:100px; border:1px solid red;"></div>
    </td>
    <td valign = "top">
        <div style="height:10px; width:100px; border:1px solid black; position:sticky; position: -webkit-sticky; top:10px; "></div>
    </td>
</tr>
</table>

【问题讨论】：

您可以改用position:fixed。
这是一个简化的案例，position:fixed不适合我。
@Vv。你永远不应该在td 中使用div，而且当你说它在 safari 中不起作用时，这意味着什么以及预期的输出是什么？
不管是div 还是button - 两者都不起作用。我需要 position: sticky 行为 - 这里有简单的例子：https://developer.mozilla.org/en-US/docs/Web/CSS/position

标签： html css css-position sticky

【解决方案1】：

我通过将position:stickydiv 包装到另一个div 中解决了这个问题，该div 的高度使用javascript 设置为等于父td 的高度。

<table>
    <tr>
    <td valign = "top">
        <div style="height:1000px; width:100px; border:1px solid red;"></div>
    </td>
    <td id="td" valign = "top">
        <div id="wrap">
        <div style="height:10px; width:100px; border:1px solid black; position:sticky; position: -webkit-sticky; top:10px; "></div>
        </div>
    </td>
</tr>

$('#wrap').height( $('#td').height() );

示例：https://jsfiddle.net/mqvpb1r5/

【讨论】：