使用position:sticky时如何消除元素占用空间？（不可修改HTML结构）

现有HTML结构：

<div class="main">
  <div class="sticky">
    sticky menu
  </div>
  <div class="body">
    body
  </div>
  <div class="other">
    other body
  </div>
</div>

对应CSS样式：

html body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.main {
    width: 100%;
    max-width: 300px;
    height: 480px;
    margin: 0 auto;
    background-color: yellow;
    position: relative;
    margin-top: 50px;
}
.body {
    height: 720px;
}
.sticky {
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: blue;
    display: inline-block;
    transform: translate(-100%, 0);
}

当前问题：.sticky元素左移后仍在文档流中占据空间，需在不修改HTML结构的前提下消除该占位。

方案1：零宽度+溢出可见 #

将.sticky的宽度设为0，允许内容溢出，这样元素在文档流中不再占据宽度空间，transform后的内容正常显示：

.sticky {
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: blue;
    display: inline-block;
    transform: translate(-100%, 0);
    width: 0;
    overflow: visible;
}

方案2：负margin+浮动 #

将.sticky设为浮动元素，通过负左margin实现左移，同时脱离文档流消除占位：

.sticky {
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: blue;
    float: left;
    margin-left: -100%;
}

方案3：绝对定位模拟（需JS增强粘性） #

若容器为固定高度可滚动，用绝对定位让元素脱离文档流，如需滚动粘性需配合JavaScript处理：

.sticky {
    position: absolute;
    z-index: 10;
    top: 0;
    left: -100%;
    background-color: blue;
}

内容的提问来源于stack exchange，提问作者honmaple