CSS

Question

を使用して相対要素を含むDIVを中心にするこの動作については苦労します。私はDIVコンテナの中に2つのDIV（sub1とsub2）を追加します。 Sub2は、Sub1の右下隅と重なる相対位置に設定されます。これを行うには、コンテナDIVの幅が良くない、Sub1の相対位置を変更する前と同じです。当初、それは問題ではありませんでしたが、クライアントは全体を集中させることにしました。そのため、コンテナの実際の幅が必要でした。

これはCSSで実現できますか？ JavaScriptでも、私は同じ幅（erronus）を持っています。私はあなたが見たいものを行動の少しは不明だ

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    display: inline-block; 
 
    margin: auto; 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
<div id="sub1"> 
 
</div> 
 
<div id="sub2"> 
 
</div> 
 
</div>

Answer 1

コンテナDIVの幅を2ブロックにする場合は、相対的な配置を使用しないでください。代わりにマージンを使用する

#sub2 { 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    margin-left: 80px; 
    margin-top: -20px; 
} 

Answer 2

：ここ

は、問題の簡単な例です。私はあなたが赤と青の四角形が重なり合って欲しいと思っていますが、あなたはまたそれらをページの中央に置いて欲しいですか？その場合、解決策は簡単です。「メイン」と小さなボックスの間に別のDIVレイヤーを追加するだけです。

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
#center { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
    <div id="center"> 
 
     <div id="sub1"> 
 
     </div> 
 
     <div id="sub2"> 
 
     </div> 
 
    </div> 
 
</div>

は、一般的に、要素がしたい各「変革」のために、あなたはその変換のためにそれを中心に別のDIVラッパーを追加する必要があります。そうすれば、それぞれの変換は互いに独立しており、管理が容易になります。

Answer 3

div3を追加することなく、任意の要素を中央に配置する一般的な方法は、left（または垂直センタリングの場合はtop）と組み合わせてtransformプロパティを使用します。

html, body { 
 
    width:100%; 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: fixed; 
 
    width: 200px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
#sub1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color:red; 
 
    position: relative; 
 
} 
 

 
#sub2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
    position: relative; 
 
    left: 80px; 
 
    top: -20px; 
 
}

<div id="main"> 
 
    <div id="sub1"></div> 
 
    <div id="sub2"></div> 
 
</div>

それは、このデモでは何もしていなかったので、私はまた#main{}からdisplay: inline-block;を削除しました。