html - 修复了 DIV 两侧的按钮高度

Question

我想不通。我需要 2 个按钮来粘住……即使滚动也是如此。该站点使用 Bootstrap。我在桌面和移动 View 中将按钮定位在我想要的位置。但我无法让它们固定在 DIV 的一侧。请提出建议:

<div class="span12">
  <asp:Panel>
    <!-- Buttons -->
    <div style="width:100%; position: relative;">
      <asp:HyperLink runat="server" ID="lnkP"><span style="width:14px; height:60px; position: absolute; top: 65px; left:-4px; text-align: center;"><i class="icon-chevron-left" style="position:relative; top:45%; transform: perspective(1px) translateY(-45%);"></i></span></asp:HyperLink>
      <asp:HyperLink runat="server" ID="lnkN"><span style="width:14px; height:60px; position: absolute; top: 65px; right:-4px; text-align: center;"><i class="icon-chevron-right" style="position:relative; top:45%; transform: perspective(1px) translateY(-45%);"></i></span></asp:HyperLink>
    </div>
    <!-- Main Table -->
    <table style="width: 100%;" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <p>
            The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum."
          </p>
        </td>
      </tr>
    </table>
  </asp:Panel>
</div>

也许我搜索时使用了错误的词。

Answer 1

感谢 Carol 的建议，position:sticky，我能够通过以下方式获得所需的布局:

<div style="position: sticky; top:100px;">
    <div style="width:100%; position: relative;">
        <asp:HyperLink runat="server" ID="lnkP"><span style="width:14px; height:60px; position: absolute; left:-8px; text-align: center;"><i class="icon-chevron-left" style="position:relative; top:45%; transform: perspective(1px) translateY(-45%);"></i></span></asp:HyperLink>
        <asp:HyperLink runat="server" ID="lnkN"><span style="width:14px; height:60px; position: absolute; right:-8px; text-align: center;"><i class="icon-chevron-right" style="position:relative; top:45%; transform: perspective(1px) translateY(-45%);"></i></span></asp:HyperLink>
    </div>
</div>

请注意，我制作了一个额外的 DIV 并将其放在最前面。