HTMLでは、要素の積み重ね順序のデフォルトルールは何ですか？

要素の積み重ね順序のデフォルトのHTMLルールを把握しようとしていますか？親、子、または兄弟要素の要素順序のスタック化の制約はありますか？（またはこれを決定するのは厳密にCSSですか？）HTMLでは、要素の積み重ね順序のデフォルトルールは何ですか？

わかりやすくするために、この例を示します。私は願って子供の組み合わせ、

<div id="A"> 
    <div id="B"> 
     <div id="D"></div> 
    </div> 
    <div id="C"></div> 
</div>

質問が十分に明確である - 例としてLink

は、複雑な両親を持つこのような文書は言うことができます：この例の要素ではAは以上の要素Bが積層されています。

更新日：私は、兄弟要素の場合、デフォルトでHTMLが、positionが固定または絶対の場合に以前の要素よりも別の要素の後に来る要素をスタックすることを確立しました。

こちらをご覧ください：https://jsfiddle.net/s8nzaoh9/

出典

2017-08-08 Nigel Smith

イムあなたがliitationsによって何を意味するかわからないが、何が起こるか見...しかし、それはあなたの例では、構造がseingも意味がありません所望の結果。 ;） – VA79

[stacking context]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context）のような意味ですか？ – j08691

親愛なる皆さん、私が希望する質問への更新を見てください。はい、私はスタッキングを意味します:) –

はまあ、それはあなたがそれらを置く方法によって異なります。基本的には、z-indexのようなルールを使用しない限り、積み重ねられます。それは、より大きなZインデックスを持つ要素が他の要素の上に来るようなものです。より大きなZ-インデックスを持つ要素は、常にZ-インデックスの低い要素の前にあります。なぜこの問題を解決するためにCSSを使用しない理由があるのかわかりません。また、必要な数の要素をスタックできます私は思う、それはすべて見た目が乱雑に見えるが、それを解決するには、少なくとも私は知っている限り、いくつかのCSSが必要です。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <style> 
 
\t \t #box1,#box2,#box3{ 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t border:1px solid black; 
 
\t \t \t position: relative; 
 
\t \t } 
 
\t \t #box1{ 
 
\t \t \t background-color: red; 
 
\t \t \t z-index: 10; 
 

 
\t \t } 
 
\t \t #box2{ 
 
\t \t \t background-color: green; 
 
\t \t \t margin-top: -30px; 
 
\t \t \t z-index: 20; 
 

 
\t \t } 
 
\t \t #box3{ 
 
\t \t \t background-color: blue; 
 
\t \t } 
 
\t </style> 
 
</head> 
 
<body> 
 

 
<div id="box1"> 
 
</div> 
 

 
<div id="box2"> 
 
</div> 
 

 
<div id="box3"> 
 
</div> 
 
</body> 
 
</html>

Zインデックスのそれらの値を変更してみてくださいと

出典

2017-08-08 21:15:41 Bourne96

こんにちはBourne96、あなたの答えに感謝！明確なCSS属性が与えられていないため、私はCSSが不明であることを意味しましたが、何でもかまいません！私の質問はHTMLを対象にしていますが、HTML要素の制限は他の要素に重ねることができますか、それとも文字通りこれを決めるCSSですか？ –

それはあなたが置くのと同じ方法ですが、インライン要素の場合は、すべてスタックすることになります。最大幅に達するまで水平方向に進み、ブロックは互いに積み重ねられます。ですから、CSSなしでは、私が知る限りでは制限がありません。要素をどの順序で配置するかによってのみ決まります。 – Bourne96

こんにちはBourne96、あなたの例を使うのは、デフォルトではHTMLの中に入っている順番にスタックしているようです：https://jsfiddle.net/s8nzaoh9/それらがすべて同じz-インデックスを与えられ、固定または絶対の。私はもっと深く見なければならないので、彼がデフォルト設定しているものが親と子供の要素であることを見てください。 –

HTMLでは、要素の積み重ね順序のデフォルトルールは何ですか？

答えて

関連する問題