divを絶対位置にしたいのですが、上に固定されていませんが空白があります。コンテナのサイズはposition:relative、内側のブロックのサイズはposition:absoluteです。私はコードを試してみると、バックグラウンドの位置が変わることに何らかの影響があることに気付きました。理由は分かりません。Cssの位置の絶対値は、先頭に空白を残します
<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>
私がしたいのは、上部に緑色のブロック（フィドル参照）を置くことです。ここで
は、誰もが行動を説明し、ブロックを上からずれている理由をお答えすることができますしてくださいfiddle
のですか？
親との相対的な位置になるため、上端から移動します（.header-wrapper）。目的の結果を得るには、親からposition: relativeを削除する必要があります。したがって、ビューポートからの相対的な位置になり、先頭に配置されます。
編集：実際には、マージンはラッパーの子に適用され、margin collapsingが発生することを認識しました。これを修正するには、親要素にoverflow: autoを適用する必要があります。これを行うことで、子によってプッシュダウンされないので、ラッパー上にまだposition: relativeを置くことができます。デモを見てみましょう：私はこれを正しく理解していた場合
/* header block */
header {
height: 536px;
background-color: #ddd;
background-position: center;
background-size: 100% 536px;
background-repeat: no-repeat;
overflow: hidden;
}
header .header-wrapper {
position: relative;
overflow: auto;
z-index: 2;
}
.header-slogan-1 {
font-size: 32px;
font-weight: 700;
font-style: italic;
margin-top: 88px;
}
.header-wrapper .header-info {
position: absolute;
top: 0;
z-index: 3;
background-color: #4caf50;
max-width: 600px;
padding: 25px 25px 25px 75px;
color: #fff;
}
.text-center {
text-align: center;
}<header>
<div class="header-wrapper">
<div class="header-slogan-1 text-center">Base info</div>
<div class="header-info">Info</div>
</div>
</header>しかし、ラッパーには余白がありませんか？私はそれを見ない。 '.header-slogan-1'はマージントップのプロパティを持っていますが、ラッパーではありません。 –
あなたはそうです、 'overflow：auto'で修正できます。 –
@AndreyPutilov私の編集した回答を見る –
、あなたはその周りにスペースがないように、ヘッダーをしたいです。この場合は、あなたのCSSの上部に
body {
margin: 0;
padding: 0;
}
を追加してください。すべて設定する必要があります。
margin-top: 88px;をpadding-top: 88px;のheader-slogan-1に変更しました。これはレイアウトを変更しないためです。私はラッパークラスの画像を持っており、それは中心にあり、コンテナのサイズを超えている可能性があるので、position:relativeとoverflow:hiddenが必要です。
最後に、解決策を選ぶことにしました。あなたの答えを選んでいないため、申し訳ありません。
回答ありがとうございます。私は 'margin-top'を' header-slogan-1'要素の 'padding-top'に変更すると思います。しかし、「ポジション：相対的」の行動は依然として私にとっては難しいものです。 –
あなたの問題を解決した場合、答えを受け入れてください –
なぜ座標原点が上端から88px下に始まり、背景が上から陰になっているのかは完全にわかりません。私の視点からは一致するはずです。ラッパーがシフトされている場合、それに応じて陰影付けする必要があります。そうでない場合は、先頭から0pxから始まり、マージンを持たないはずです。それはややこしい。しかし、それは大丈夫です、私は質問を閉じることができます。 –