Question

我有一个具有绝对位置的元素，该元素显示在垂直滚动条上，从而防止用户使用滚动条滚动页面。

a busy cat

This fiddle解释了问题以及我目前正在做什么。

这是我用来定位div的css。

.side-content {
  background: grey;
  position: absolute;
  right: 0;
  top: 60px;
  height: calc(100% - 132px);
  width: 100px;
}

我期望考虑到滚动条（无需手动添加边距）并且不将其悬停放置div。预先感谢！

Answer 1

做z-index: -50;

.side-content {
  z-index: -50;
  background: grey;
  position: absolute;
  right: 0;
  top: 60px;
  height: calc(100% - 132px);
  width: 100px;
}

Answer 2

body {
    margin: 0;
    text-align: center;
  }
  .wrapper
  {
    position:absolute;
    width: 100%;
    height:100%;
    display: flex;
  }
  .inside_div_one
  {
    width:10%;
    height:100%;
    background-color: green;
  }
  .inside_div
  {
    width: 25%;
  }
  .inside_div_two
  {
    width:80%;
    height:100%;
  }
  .inside_div_three
  {
    width:10%;
    height:100%;
    background-color: grey;
  }

<html>
  <head>
    
  </head>
  <body>
    <div class="wrapper">
      <div class="inside_div_one">
        <p>sidebar</p>
      </div>
      <div class="inside_div_two">
        <p>FIRST</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>LAST</p>
      </div>
      <div class="inside_div_three">
        <p>jvsdfv</p>
      </div>
    </div>
  </body>
</html>

垂直滚动条隐藏了具有绝对位置的元素

2 个答案: