2つのボックスをどのように配置して整列させるか？

Question

h1と内側のボックスの両方を外側のボックスの左上隅に配置したいと思います。

これは私の試みですが、失敗しました。私はjavascriptの無料のソリューションを探しています。

.outer { 
 
    position: absolute; 
 
    margin: 50px; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
} 
 
h1 { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.inner { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: red; 
 
}

<div class="outer"> 
 
    <h1> 
 
some text 
 
</h1> 
 
    <div class="inner"> 
 
    </div> 
 
</div>

Answer 1

あなたは間違っposition:absoluteを使用しています。あなたの場合、コードを動作させるには、からposition:relativeに.outerで変更してください。

postion:absoluteを使用するように要素に指示すると、その要素がDOMから取り出され、position:relativeの最も近い親が検索されます。

注：この例ではpositionを使用している理由を私は知らないこれは私がこれらの要素を整列させる必要がある場合は、私が取る最後のオプションであるので、あなたはあなたのを作るためにdisplay:inline-blockまたはdisplay:flexで遊ぶことができます要素は正しく整列します！

Answer 2

代わりrelativeポジショニングの使用absolute。

.outer { 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
    margin: 20px; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.inner { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 0px; 
 
    left: 0px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
}

<div class="outer"> 
 
    <h1> 
 
some text 
 
</h1> 
 
    <div class="inner"> 
 
    </div> 
 
</div>

Answer 3

あなたは内箱のための相対的な外箱の位置決め、絶対に使用したいと思います。 h1の場合、内側のボックスの内側にあることを確認してから、明示的な幅と高さの代わりにパディングを使用することができます。

https://jsfiddle.net/hnezfs3k/1/

<div class="outer"> 
    <div class="inner"> 
    <h1> 
     some text 
    </h1> 
    </div> 
</div> 



.outer { 
    position: relative; 
    width: 400px; 
    height: 400px; 
    background-color: blue; 
} 
h1 { 
    color: #fff; 
} 
.inner { 
    padding: 8px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: rgba(255, 0, 0, .5); 
}