フレックスボックスアイテム（相対エレメントあり）

Question

フレックスボックスアイテムの上と下に相対エレメントを取得しようとしています。

あなたがフィドルで見ることができるように、私はそれが起こることからそれほど遠くはありません。

しかし、画像が下に押し込まれ、フレックスボックスの上部に貼りたいと思います。私はここで

に表示フレックスを削除した場合、私のコード

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内のスペースを取ってイメージを下方に押し込まないようにする必要があります。

だけposition: absolute;に.elem-stickerを変更して、アンカーポイントとして使用する.elemクラスに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があります。