CSS网格重叠项目覆盖滚动条

时间:2018-07-20 23:27:09

标签: css css3 css-grid

这是我的代码:https://jsfiddle.net/dereklin/0tLf05sr/12/

我想将扩展手柄置于右侧,但仅在滚动条之前:

  #expand-handle {
    grid-row: 6 / 7;
    grid-column: 2 / 3;
    justify-self: end;
    width: 40px;
    height: 140px;
    background-color: #00677f;
    color: white;
    border: 1px solid #ccc;
    padding: 5px 0px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    cursor: pointer;
    margin-top: 85px;
    text-align: center;
  }

但是,这不起作用

在CSS网格中执行此操作的正确方法是什么?

(右边距不是我要寻找的解决方案,因为我还有其他页面可能没有滚动条)

2 个答案:

答案 0 :(得分:0)

#expand-handle中移动<div class="content"></div>怎么样?

https://jsfiddle.net/pratie/0tLf05sr/23/

答案 1 :(得分:0)

#expand-handle 放入 .main 分区中。

value1

然后,像这样更改您的主CSS和扩展句柄。

<div class="main">
    Lorem ipsum dolor sit amet, consectetur .........

    <div id="expand-handle">Expand Me</div>
</div>

此外,删除内容和正文中的overcss。

    .main {
      grid-area: main;
      height: 1000px;
      position: relative;
    }

      #expand-handle {
        position: fixed;
        right: 0;
        width: 40px;
        height: 140px;
        background-color: #00677f;
        color: white;
        border: 1px solid #ccc;
        padding: 5px 0px;
        writing-mode: vertical-lr;
        transform: rotate(180deg);
        cursor: pointer;
        margin-top: 85px;
        text-align: center;
      }