Question

我有一个网站，我正在尝试在右下角添加“与我们联系”标签。我的模拟Here is a fiddle。粉红色的联系人选项卡位于滚动条上方。我希望它只是滚动条的左侧。

我正在使用position:fixed将标签放在右下方，但它与滚动条重叠。我可以将right:0更改为其他内容，但我的理解是滚动条的宽度因浏览器而异，所以我不知道选择哪个值。

我用Google搜索并发现了许多令人困惑和错综复杂的答案，但似乎没有人真正解决我想要解决的问题。

如何定位要修复的元素而不与滚动条重叠。

Answer 1

您可以使用以下方式隐藏滚动条：


    ::-webkit-scrollbar { 
    display: none; 
    }

这样人们仍然可以滚动，但这仍然不是非常用户友好，只适用于webkit浏览器。我认为你的目标是一场失败的战斗;我会把它与底部齐平，并给它与网站上其他内容相同的右边距，然后你不必弄乱它，它看起来仍然很好。

像Safari这样的浏览器会完全隐藏滚动条，除非你正在主动滚动，所以除非你想为每个浏览器调整它......不用了谢谢：）

Answer 2

虽然我在上面的评论中已经提到我建议重新考虑您的网页结构，但我相信＆＃34;快速修复＆＃34;你之后是：

1。从position: absolute;

中删除#workspace

2。将top: 30px;更改为margin-top: 30px;上的#workspace

3。让您的#content-header z-index比其余2更高（例如#content-header { ... z-index: 2; } #workspace { //top: 30px; -- REMOVE THIS //position: absolute; -- REMOVE THIS margin-top: 30px; }）

<h1>New Article</h1>
<%= form_for @article, url: articles_path do |f| %> <!<%= form_for :article, url: articles_path do |f| %> >

  <% if @article.errors.any? %>
    <div id="error_explanation">
      <h2>
        <%= pluralize(@article.errors.count, "error") %> prohibited
        this article from being saved:
      </h2>
      <ul>
        <% @article.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>

<%= link_to 'Back', articles_path %>

JSFiddle

Answer 3

如果您想要标签下方的滚动条，可以使用：

 z-index : 'number value';

以下是您的小提琴的更新版本：Fiddle

那是你在寻找什么？或者您是否正在尝试将元素完全移离滚动条，以使其在页面的一侧浮动？或响应滚动条“活着”？如@chazsolo所提到的那样，更容易对左侧进行设计更改，而不是处理滚动条动态大小的细微差别。

Answer 4

这里你可以使用下面的代码

/* You just need to change this css and you'll get desired output - start*/
#workspace {
  overflow-y: overlay;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
}
#workspace::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f500;
}

#workspace::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bbbbbb;
}
#workspace::-webkit-scrollbar-track {
  background: transparent;
}
/*---------End--------------------------*/

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  line-height: 1.7;
}

#content-header {
  position: fixed;
  height: 30px;
  top: 0;
  left: 0;
  right: 0;
  background-color: cornflowerblue;
  color: white;
  font-size: 1.3em;
  padding: .25em 1em;
}
/* You just need to change this css and you'll get desired output - start*/
#workspace {
  overflow-y: overlay;
  position: absolute;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
}
#workspace::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f500;
}

#workspace::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #bbbbbb;
}
#workspace::-webkit-scrollbar-track {
  background: transparent;
}
/*---------End--------------------------*/

#body-container {
  min-height: 100%;
  position: relative;
  padding: 2rem 2rem 130px 2rem;
}

#footer {
  position: absolute;
  bottom: 0;
  margin-bottom: 10px;
  font-size: .8rem;
}

#floaty-tab {
  position: fixed;
  right: 0px;
  bottom: 40px;
  min-height: 20px;
  background-color: #f0f;
  color: white;
  font-size: .8rem;
  padding: 1rem .5em;
}

<div id="content-header">
  Site name
</div>
<div id="workspace">
  <div id="body-container">

    <div id="floaty-tab">
      Contact
    </div>

    <div class="anyipsum-output">
      <div class="body">
        <div class="anyipsum-output">
          <p>Bacon ipsum dolor amet drumstick shoulder pork loin jowl. Cupim pork chop shoulder hamburger ball tip. Pork ground round pork belly, venison short loin jerky boudin kevin capicola pancetta sausage corned beef shankle chuck. Landjaeger shank
            chuck leberkas bacon bresaola.</p>
          <p>Tongue meatball frankfurter shankle prosciutto shoulder fatback meatloaf turducken kevin salami drumstick bacon. Swine pork chop ham andouille leberkas hamburger venison. Kevin porchetta rump t-bone short ribs. Pork belly landjaeger meatloaf
            brisket, flank kevin turkey burgdoggen cow bacon ground round short ribs. Filet mignon salami capicola, cupim swine leberkas drumstick picanha. Bacon chuck pancetta pork sausage.</p>
          <p>Capicola beef ribs short loin landjaeger chuck ham cupim pork loin hamburger short ribs burgdoggen pastrami doner. Spare ribs pork belly sirloin kevin cow jowl. Tri-tip jowl pork landjaeger fatback ham bresaola brisket ground round boudin pastrami.
            Fatback salami meatloaf shoulder. Pork porchetta cow pork belly jerky swine leberkas shoulder burgdoggen tail pancetta pastrami spare ribs picanha chicken. Beef capicola ribeye porchetta flank kevin ham hock rump burgdoggen. Meatloaf venison
            prosciutto tongue picanha rump bresaola capicola t-bone doner ham hock jowl tail shank fatback.</p>
          <p>Strip steak shoulder ham brisket, burgdoggen ham hock pancetta cow meatball rump. Sausage tail bresaola tenderloin, short loin prosciutto turkey pork chop. Rump cupim frankfurter spare ribs pork shankle beef ribs biltong turducken. Tri-tip sirloin
            beef bresaola pork belly. Shank beef brisket doner turducken picanha, bresaola jerky fatback cow spare ribs ribeye hamburger.</p>
          <p>Turkey ham hock capicola, sausage bacon shoulder hamburger pork loin. Beef venison shankle ham hock drumstick shank. Bresaola ham hock tail shank capicola strip steak fatback. Chuck pork chop leberkas beef, shoulder fatback strip steak jowl
            flank.</p>
        </div>
      </div>
    </div>

    <div id="footer">
      <p>
        The footer content
      </p>
    </div>
  </div>
</div>

防止固定元素重叠滚动条

4 个答案: