时间戳

首页 > 解决方案 > 在 CSS 中使绝对子 div 溢出其可滚动的相对根父级

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

问题描述

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

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>

这是查看它的外观的链接^^

标签： htmlcss

解决方案

将top规则添加到child类并position: relative从蓝色 div 中删除，然后它将位于红色 div 上方。

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

更新

如果您想让红色 div 可滚动并且还溢出绿色 div，则仅使用 CSS 无法完成。你可以用 JS 来做。计算蓝色元素的顶部位置并将其设置为绿色元素的顶部规则

这是一个例子

推荐阅读