垂直に配置された要素が空白を残す

Question

私はthisスレッドを使用して、自分のウェブサイトのページに要素を垂直に配置しました。それは動作しますが、上に大きな空のスペースを残して、私は理由を理解することはできません。

.wrappert { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.wrapper { 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 

 
.cn-container { 
 
    width: 60%; 
 
    /* min-width: 600px; */ 
 
    max-width: 820px; 
 
    margin: 10px auto 0 auto; 
 
    text-align: left; 
 
    position: relative; 
 
} 
 

 
.cn-slide{ 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t padding-top: 80px; 
 
\t margin: 0 5%; 
 
\t width: 90%; /* 738px fixed*/ 
 
\t opacity: 0; 
 
} 
 

 
.cn-slide:target{ 
 
\t opacity: 1; 
 
\t z-index: 1000; 
 
}

<div class="wrappert"> 
 
    <div class="wrapper"> 
 
    <div class="cn-container"> 
 
     <div class="cn-slide" id="slide-main">Lorem ipsum dolor sit amet.</divv> 
 
     <div class="cn-slide" id="slide-main">Nam dapibus euismod ex egestas dictum.</divv> 
 
     <div class="cn-slide" id="slide-main">Interdum et malesuada fames ac ante ipsum primis in faucibus.</divv> 
 
    </div> 
 
    </div> 
 
</div>

ウェブサイトは、あなたが誤って、彼らのposition: absoluteであなた.cn-slide要素は、レイアウトの通常の流れに参加することを想定し、そのコンテナの高さを拡大し、余分なスペースを配布しているhttp://www.glamparrucchieria.com

Answer 1

です必要に応じて上下に移動します。彼らはではありませんそれらは - あなたの絶対配置され、あなたの.cn-container要素のサイズに貢献していません。彼らはまったくそこにいないかのようです。

これは、高さが.cn-containerで、スライドが静的に配置されていた場合の位置に視覚的にぶら下がっていることを示しています。 left、top、right、またはbottomと指定した場合は、ピボットのために最も近い絶対的または相対的な位置の祖先要素（または文書の隅）を自由に動かすことになります。

あなたが想像することができれば、1つの視覚的な透明なレイヤーが互いの上にあり、残りのページのすべてが前面にあるように見えます。

あなたの最も安全な賭けは、あなたの.cn-slideルールからposition: absoluteを除去することにより、絶対位置を放棄し、非表示にする必要があなたのものを「非アクティブ」のスライドにdisplay: noneを適用することで、それだけで1を示す「アクティブ」スライド（:target） display: blockて：あなたはそれがしたいよう

.cn-slide { 
    display: none; /** 'disable' each slide */ 
    position: initial; /** or just make sure there is no absolute positioning, this is just to illustrate static positioning, if you don't have `position: absolute` applying for this selector, you don't need this rule. */ 
} 
.cn-slide:target { 
    display: block; /** enable the 'current' slide */ 
} 

上記と同等のものを取り入れ、あなたのページが見えるはずです。そして、絶対的な配置は、単に言い換えると、他のページ要素の前または後に新しい層のようなものを作り出すことを忘れないでください。あなたが理論を学びたいならば"CSS basic box model"を読んでください。