이 단추를 내 페이지에 추가하면 이전에 가운데에 놓인 다른 요소가 오프셋됩니다.

Question

저는 flexbox로 페이지의 스타일을 지정하고 있습니다. 배경 이미지가있는 div 안에 멋지게 가운데 놓인 이미지가 있습니다.

---

https://codepen.io/efbbrown/pen/PmOpWo 지금 나는 그들이 경우 사용자가 배경 이미지를하시기 바랍니다 변경할 수 있도록 X 버튼을 추가 할 :

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를 참조

. 버튼 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

이 어떻게 사업부에이 X 버튼을 추가 할 수있는 센터 이미지의 위치를 ​​변경하지 않고?

감사합니다.

Answer 1

플렉스 상자는 플렉스 요소 내부에 포함 된 항목 수에 따라 항목의 위치와 너비를 변경합니다. 즉, 닫기 버튼을 추가하면 배너 이미지가 전체 너비가 아닌 남은 공간을 기준으로 중앙에 배치됩니다. absolute으로 위치를 변경하여 flexbox 형식에서 항목을 "제거"할 수 있습니다. 이 요소는 flexbox에 의해 무시됩니다.

이

트릭을 수행해야합니다

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

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

편집

대답을 아래에 코멘트에서 질문 : 절대 위치는 항상 화면이나 윈도우의 폭과 높이에 의해 결정되지 않는다. 실제로는 가장 가까운 '위치 지정된'부모 (예 : position: relative으로 표시된 부모)에 의해 결정됩니다.

절대 위치를 함께 사용하면 절대 위치가 실제로 잘 작동합니다. 이 예제에서는 배너 클래스를 위치 관계식으로 표시 할 수 있으며 해당 div를 이동할 때마다 닫기 버튼이 배너 div를 기반으로 위치 및 위치를 지정합니다.