让 div 包含在祖父母中？答案

【问题标题】：Make div contained inside the grand parent?让 div 包含在祖父母中？
【发布时间】：2021-06-21 16:54:46
【问题描述】：

假设我有 3 个 div，grandParent、Parent 和 Child。虽然父母的标签在祖父母内，但使用位置：绝对；父级呈现在祖父级之外。现在我有一个高度和宽度为 100% 的孩子，它呈现在祖父母之外。如何强制子级仅在 grandParent 内渲染。我希望绿色 div 完全在红色 div 内。并且黄色 div 部分保留在红色 div 之外。

<html>
   <head>
      <style> 
         .grandParent {
         width: 600px;
         height: 700px;
         background-color:red;
         }
         .parent {
         position: absolute;
         left: 0px;
         top: 0px;
         width: 360px;
         height: 275px;
         background-color: yellow;
         border: 2px solid yellow;
         transform: translate(417px, -88px) rotate(
         0deg
         );
         }
         .child {
         height: 275px;
         background-color: green;
         }
      </style>
   </head>
   </head>
   </head>
   <body>
      <div class="grandParent">
         <div class="parent">
            <div class="child">
            </div>
         </div>
      </div>
   </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您应该使用position: relative; 作为祖父 div。喜欢这段代码：

.grandParent {
    width: 600px;
    height: 700px;
    background-color: red;
    position: relative; /* add this line */
}

.parent {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 360px;
    height: 275px;
    background-color: yellow;
    border: 2px solid yellow; 
    transform: translate(227px, 9px) rotate(0deg); /* modify this line */
}

阅读documentation 了解 div 定位。

【讨论】：

错误答案，我想在祖父 div 中创建一个子 div，但这个答案并没有达到同样的效果。
你是关于css还是html？
如果你是关于html的，你只需要在grandParent div中添加div下一个子div（child2）。像这样：

【解决方案2】：

我可以通过在子 div 上设置绝对定位来实现这一点。请注意，我设置了任意值以使祖父 div 中的子 div 与父 div 分离。确保在子 div 上设置所需的宽度。

<html>
   <head>
      <style> 
         .grandParent {
         width: 600px;
         height: 700px;
         background-color:red;
         }
         .parent {
         position: absolute;
         left: 0px;
         top: 0px;
         width: 360px;
         height: 275px;
         background-color: yellow;
         border: 2px solid yellow;
         transform: translate(417px, -88px) rotate(
         0deg
         );
         }
         .child {
         position: absolute; /* add from here */
         left: -370px;
         top: 100px;
         width: 360px; /* to here */
         height: 275px;
         background-color: green;
         }
      </style>
   </head>
   </head>
   </head>
   <body>
      <div class="grandParent">
         <div class="parent">
            <div class="child">
            </div>
         </div>
      </div>
   </body>
</html>

【讨论】：