将内部 div 放在超级父级之外 - CSS答案

【问题标题】：Place inner div outside the super parent - CSS将内部 div 放在超级父级之外 - CSS
【发布时间】：2022-01-25 13:05:12
【问题描述】：

我需要在超级父级之外放置一个内部子元素。我希望保留超级父子关系并在超级父项上启用overflow: auto。下面是我得到的视图：

所需条件如下：

我在下面附上代码sn-p，你能帮忙吗？谢谢。

*{
  color : white
}

.superParent{
 overflow : auto;
 background-color : red;
 padding: 1rem;
  position : relative;
  padding: 1px;
} 

.parent{
  background-color : green ;
  padding : 1rem;
  position : relative
}

.child{
  background-color : grey;
  position: relative;
  bottom: -60px;
  margin-bottom: 1rem;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <div class="superParent">
     Super Parent :: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laudantium ex ab architecto totam pariatur earum. Neque repellat, fugit porro similique repellendus sint ducimus commodi, at ratione ullam magni reiciendis expedita magnam animi mollitia perspiciatis, perferendis voluptas autem placeat facilis. Ratione voluptas voluptatibus molestias libero consequatur architecto perspiciatis dolore qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic laudantium ex ab architecto totam pariatur earum. Neque repellat, fugit porro similique repellendus sint ducimus commodi, at ratione ullam magni reiciendis expedita magnam animi molli
     <div class="parent">
        parent
       <section class="child">
           child
       </section>
     </div>
   </div>
   <br/><br/>
</body>
</html>

【问题讨论】：

您能否解释一下父级在所需场景中应该如何滚动？有什么可以滚动的？例如，还有其他东西可以给它一个高度定义吗？

标签： html css

【解决方案1】：

我不认为你的要求是可能的； overflow: auto 的每个后代都将包含在滚动中，除非它是 position: fixed，我认为它不适合您。

您确定必须保留该标记吗？

【讨论】：

感谢@Jean 的回复。我正在研究一个现有的项目，该项目已经完成了标记，我被要求研究这种可能性。如果可能的话，想和你们所有人（开发者社区）核实一下。谢谢。