상대 요소가있는 플렉스 박스 항목

Question

플렉스 박스 항목의 위쪽과 옆쪽에 상대 요소를 가져 오려고합니다.

피들 (fiddle)에서 볼 수 있듯이 나는 그런 일이 일어나지 않은 곳입니다.

그러나 이미지가 아래로 밀려서 플렉스 박스 항목의 맨 위에 붙어 싶습니다. 내가

에 디스플레이 플렉스를 제거하면 다음

가 도움을 사전에 감사합니다 내 코드

html, body{ 
 
    background: red; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    margin-top: 80px; 
 
    min-height: 100%; 
 
    background: rgba(0, 0, 0, 0.25); 
 
    display: flex; 
 
    padding: 8px; 
 
} 
 

 
.bike-1 { 
 
    background: rgba(241, 255, 47, 0.256); 
 
} 
 

 
.bike-2 { 
 
    background: rgba(57, 255, 47, 0.256); 
 
} 
 

 
.elem { 
 
    flex: 1; 
 
    max-height: 256px; 
 
    max-width: 200px; 
 
    margin-left: 56px; 
 
} 
 

 
.button { 
 
    background: #f00; 
 
    margin: 4px; 
 
    text-align: center; 
 
    border-radius: 3px; 
 
} 
 

 
.elem:first-child{ 
 
    margin-left: 0; 
 
} 
 

 
.bg-img { 
 
    width: 200px; 
 
    height: 100px; 
 
    background: url('http://www.triplancar.com/sites/triplancar.com/files/styles/slick_thumb/public/lieu/146/dsc5440ok.jpg?itok=TfonlmeG'); 
 
} 
 

 
img { 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
.elem-sticker { 
 
    background: rgba(255, 255, 255, .75); 
 
    float: right; 
 
    height: 64px; 
 
    width: 64px; 
 
    position: relative; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 64px; 
 
    top: -24px; 
 
    right: -24px; 
 
} 
 

 
.title { 
 
    background: yellow; 
 
    flex-grow: 1; 
 
    text-align: center; 
 
} 
 

 
.elem-content { 
 
    width: 100%; 
 
    display: flex; 
 
    background: rgba(22, 42, 191, 0.8); 
 
    flex-direction: column; 
 
    min-height: 100%; 
 
}

<div class='container'> 
 
     
 
     <div class='bike-1 elem'> 
 
      <div class='elem-sticker'>Discount</div> 
 
      <div class='elem-content'> 
 
       <img src=http://www.triplancar.com/sites/triplancar.com/files/styles/slick_thumb/public/lieu/146/dsc5440ok.jpg?itok=TfonlmeG/> 
 
       <div class=title>Bike</div> 
 
       <div class=button>Buy</div> 
 
      </div> 
 
     </div> 
 
     
 
     
 
     <div class='bike-2 elem'> 
 
      <div class='elem-sticker'>Discount</div> 
 
      <div class='elem-content'> 
 
       <div class='bg-img'>&nbsp;</div> 
 
       <div class=title>Bike</div> 
 
       <div class=button>Buy</div> 
 
      </div> 
 
     </div> 
 

 
    </div>

입니다.

Answer 1

relative 대신 .elem-sticker 요소를 absolute으로 설정하여 문서 흐름에서 제거하고 이미지를 아래로 밀어 넣기 위해 DOM에서 공간을 차지하지 않도록해야합니다.

.elem-sticker에서 position: absolute;으로 변경 한 다음 클래스에 position: relative;을 추가하여 고정 점으로 사용하십시오.

.elem { 
    flex: 1; 
    max-height: 256px; 
    max-width: 200px; 
    margin-left: 56px; 
    position: relative; /*Add this*/ 
} 

.elem-sticker { 
    background: rgba(255, 255, 255, .75); 
    float: right; 
    height: 64px; 
    width: 64px; 
    position: absolute; /*Change this*/ 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 64px; 
    top: -24px; 
    right: -24px; 
} 

여기는 demo fiddle입니다.