Question

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

简而言之，我需要比“1st-child”元素大的“2nd-child”元素与“wrapper”的坐标空间对齐。这可能是不可能的，但能够这样做会大大降低我们需要执行的一些JavaScript计算所需的复杂性。

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

总结。如何将“2nd-child”元素放在“wrapper”元素的坐标空间中，以便top:0; left:0;导致“第二个孩子”被推入左上角，尽管它是一个孩子的“第一个” -child“element ，同时仍保持”{1}} 的'剪辑'行为，该行为是在“第一个孩子”上设置的。

声明：

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

enter image description here

HTML：

overflow:hidden;

CSS：

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

Answer 1

id属性不能以数字开头。重命名id属性并更改引用它们的选择器会导致页面具有所需的布局。

Example on 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;
}

如何将第二个子元素放置在包装元素的坐标空间中

3 个答案: