このボタンをページに追加すると、以前に中心に置かれていた他の要素がオフセットされます

Question

フレックスボックスでページをスタイリングしています。私は背景の画像とdivの中にうまく中心のイメージを持っていた。

body { 
 
    width: 700px 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #ccc 
 
} 
 

 
.wrapper, 
 
.banner { 
 
    display: flex 
 
} 
 

 
.wrapper { 
 
    flex-direction: column 
 
} 
 

 
.banner { 
 
    background-image: url("https://unsplash.it/1000/600/?random"); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    height: 300px; 
 
} 
 

 
.banner img { 
 
    height: 140px; 
 
    width: 140px; 
 
    border-radius: 140px; 
 
    border: 3px solid #fff; 
 
    align-self: center; 
 
    margin: auto; 
 
}

<nav> 
 

 
</nav> 
 
<article class="wrapper"> 
 
    <section class="banner"> 
 
    <img id="profile-pic" src="https://unsplash.it/100/100/?random" /> 
 
    </section> 
 
</article>

このcodepenを参照してください：

https://codepen.io/efbbrown/pen/PmOpWo

---

今、私は、彼らが喜ば場合、ユーザは、背景画像を変更することができるようにXボタンを追加したいです。私がボタンdivを追加すると、中央に位置するイメージが押し出されます。

追加要素：

<section class="banner"> 
    <div class="close-button"></div> 
    <img id="profile-pic" src="https://unsplash.it/100/100/?random"></img> 
</section> 

は完全なジレンマのために、このcodepenを参照してください。

https://codepen.io/efbbrown/pen/PmOpOq

私は、中央画像の位置を変更することなく、div要素に、このXボタンを追加することができますどのように？

ありがとうございます！

Answer 1

フレックスボックスは、フレックス要素内に含まれるアイテムの数に基づいてアイテムの位置と幅を変更します。つまり、閉じるボタンを追加すると、現在のバナー画像は残りのスペースに基づいてセンタリングされ、全幅には適用されません。フレックスボックスの書式からアイテムを削除するには、位置をabsoluteに変更します。その要素はフレックスボックスによって無視されます。

これはトリックを行う必要があります。以下のコメントからの質問へ

.banner { 
    /* ... */ 
    position: relative; 
} 

.close-button { 
    /* ... */ 
    position: absolute; 
    /* ... */ 
} 

EDIT

回答：絶対位置は常に画面やウィンドウの幅と高さによって決定されていません。実際には、最も近い「位置付けされた」親（例えば、position: relativeとマークされた親）によって決定されます。

絶対的な位置と絶対的な位置を一緒に使用するのは、絶対的な位置が本当にうまく機能する場所です。この例では、バナークラスを相対的な位置としてマークすることができ、そのdivをどこに移動しても、閉じるボタンはバナーdivに基づいて配置されます。