html - 如何根据包装元素的坐标空间定位第二个子元素

Question

我有一个非常具体的问题，虽然可以通过更改 HTML 或使用负边距/绝对定位轻松解决，但在这种情况下两者都不可能。

简而言之，我需要将比“第一个孩子”元素大的“第二个孩子”元素定位在“包装器”的坐标空间中。这可能是不可能的，但能够这样做将大大降低我们需要执行的一些 javascript 计算所需的复杂性。

在正常情况下，我们会将“第一个孩子”设置为相对或绝对位置，以便将“第二个孩子”定位在其父级的坐标空间中。我需要扭转这种行为。因此，我天真地假设“第二个孩子”将定位在“包装器”上，尝试在“第一个孩子”上进行静态定位。（left:0; top:0; 将导致“第二个孩子”被定位到包装器的左上角）。虽然这会正确定位元素，但它会删除“第一个孩子”上所需的剪辑集并显示整个“第二个孩子”。

所以总结一下。如何将“第二个孩子”元素定位在“包装”元素的坐标空间上，以便top:0; left:0;导致“第二个孩子”被推到左上角，尽管它是“第一个孩子”元素的孩子，而overflow:hidden;仍然保持在“第一个孩子”上设置的“剪辑”行为。

免责声明：

为了下面代码的可读性，我使用了以数字开头的 ID。这不能在实际代码中完成，但在这个问题中引用元素要容易得多。

HTML：

   <div id="wrapper">
          <div id="1st-child">
              <div id="2nd-child">
              </div>
          </div>
    <div>

CSS：

   #wrapper {
       position:fixed;
       width:1000px;
       height:1000px;
       top:0;
       left:0;
    }

   #1st-child {
       margin-left : 200px;
       margin-top : 200px;
       width: 300px;
       height: 200px;
       position:static;
       overflow: hidden;
   }

   #2nd-child {
       position:absolute;
       top:0;
       left:0;
       width:750px;
       height:600px;
   }

Answer 1

id属性不能以数字开头。重命名您的id属性并更改引用它们的选择器会产生一个具有您想要的布局的页面。

CodePen 上的示例

Answer 2

这回答了你的问题了吗？

<div id="wrapper">
     <div id="child1">
         <div id="child2">
             Hello
         </div>
     </div>
<div>
<style>
   #wrapper {
       width:600px;
       height:300px;
       background-color: pink;
       overflow: hidden;
    }

   div#child1 {
       margin-left: 100px;
       margin-top: 50px;
       width: 200px;
       height: 150px;
       border: 1px solid green;
   }

   div#child2 {
       position: absolute;
       top: 0;
       left: 0;
       width: 200px;
       height: 200px;
       border: 1px solid red;
   }
</style>

我更改了 id（它们不能以数字开头）和大小（用于调试目的）

看看它在行动：http: //jsfiddle.net/5aL9s/

Answer 3

#2nd-child {
   position:absolute;
   top:-200px;
   left:-200px;
   width:750px;
   height:600px;
}