Javascript 侧标签定位为绝对和溢出窗口？

我在浏览器窗口的一侧有一个选项卡，单击该选项卡时使用jquery将其滑入并显示。问题是，因为我把它放在绝对位置，它溢出了身体，我似乎无法阻止它。当jQuery将其拉入时，它不再溢出。只有当它被隐藏的时候

JS:

CSS:

HTML:

获得报价

填写此表格以请求报价或安排约会。有关详细信息，请致电123-456-7890。

…表单组件。。。

截图

---

我想这样做，当表单离开屏幕时，只显示选项卡，而您无法滚动查看表单的其余部分，您将需要以某种方式查看

overflow-x:hidden

如果您确定没有其他内容会溢出页面宽度，只需在

正文

本身上设置即可。如果没有，您将需要某种带有

overflow-x:hidden

的包装器

---

您是否尝试将溢出设置为滚动

overflow-x: scroll;

---

将

display:none

添加到CSST这将不起作用，因为选项卡本身位于我需要隐藏的块内。这似乎也会阻止我垂直向下滚动。很抱歉，应该指出这一点。如果在车身上使用溢出-x，则只需要

overflow-x

。如果您必须使用包装器，并且东西也垂直延伸得太远，那么您可能需要对溢出进行一些处理。出于某种原因，这似乎不会改变滚动的任何内容您是说

overflow-x:hidden

阻止您垂直滚动吗？不应该是这样的。不，我仍然能够垂直和水平滚动，好像应用它后没有发生任何变化。应用溢出时：隐藏。它可以防止所有的滚动。Overflow-x似乎正是我想要的，但由于某些原因它不起作用。

#block-webform-client-block-12 {
position: absolute;
top: 20%;
right: -380px;
background: $button-color;
padding: 15px;
width: 350px;
color: white;
z-index: 99;
@include zen-grid-container();
.quote-tab {
    position: absolute;
    top: 0;
    left: -46px;
}

    <div id="block-webform-client-block-12" class="block block-webform contextual-links-region last even">
<h2 class="block-title">
  Get a Quote
</h2>
<article class="node-12 node node-webform node-promoted contextual-links-region view-mode-full node-by-viewer clearfix" about="/get-quote" typeof="sioc:Item foaf:Document">
  <div class="field field-name-body field-type-text-with-summary field-label-hidden">
    <div class="field-items">
      <div class="field-item even" property="content:encoded">
        <img src="/sites/domain.com/files/close-quote-tab.png" class="quote-tab close"> <img src="/sites/domain.com/files/open-quote-tab.png" class="quote-tab open">
        <p>
          Fill out this form to request a quote or set up an appointment. For more information, <strong>call 123-456-7890</strong>.
        </p>
      </div>
    </div>
  </div>
  <form class="webform-client-form" enctype="multipart/form-data" action="/get-quote" method="post" id="webform-client-form-12" accept-charset="UTF-8">
    ...form_components...

overflow-x: scroll;