Question

我需要让子div（带有绿色）离开其根父（带有红色），当我从根父div中删除overflow-y:scroll属性时，这是可行的，但是我需要父根为可滚动。

CSS代码：

    .root-parent{
      font-size:20px;
      overflow-y:scroll;
      background-color:red;
      height:100px;
      width:100%;
    }
    .parent{
      width:50%;
      background-color:blue;
      height:50px;
      position:relative;
    }
    .child{
      width:50%;
      height:200px;
      background-color:green;
      position:absolute;
    }

<div class="root-parent">
      <div>1</div>
      <div class="parent">
         <div class="child">
           <div>2</div>
           <div>2</div> 
        </div>
      </div>
    </div>

这是link，以查看其外观^^

Answer 1

将master规则添加到top类中，然后从蓝色div中删除child，然后将其放置在红色div上方。

绝对位置是指相对位置的第一个祖先。

更新

如果要使红色div可滚动并同时使绿色div溢出，那么仅靠CSS不能完成。您可以使用JS完成。计算蓝色元素的顶部位置，并将其设置为绿色元素的顶部规则

Here's an example

使绝对子div溢出CSS中的可滚动相对根父级

1 个答案: