html - ラッパー要素の座標空間に対して 2 番目の子要素を配置する方法

Question

HTMLを変更するか、負のマージン/絶対配置を使用することで簡単に解決できますが、この場合はどちらも不可能であるという非常に具体的な問題があります。

一言で言えば、「ラッパー」の座標空間に対して配置するには、「1 番目の子」要素よりも大きい「2 番目の子」要素が必要です。これは不可能かもしれませんが、実行する必要がある一部の JavaScript 計算に必要な複雑さを大幅に軽減できます。

通常の状況では、親の座標空間に対して「2 番目の子」を配置するために、「1 番目の子」を相対位置または絶対位置に設定します。この動作を逆にする必要があります。したがって、「2番目の子」が「ラッパー」に対して配置されると単純に仮定して、「1番目の子」で静的な配置を試みました。(left:0; top:0; を指定すると、「2 番目の子」がラッパーの左上隅に配置されます)。これにより要素が正しく配置されますが、「最初の子」に設定された必要なクリッピング セットが削除され、「2 番目の子」全体が表示されます。

要約すると。top:0; left:0;「2番目の子」要素を「ラッパー」要素の座標空間に対して配置して、「1番目の子」要素の子であるにもかかわらず「2番目の子」が左上隅に押し込まれるよう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

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