具有相关元素的弹性盒子项目答案

【问题标题】：Flex box item with relative element具有相关元素的弹性盒子项目
【发布时间】：2018-05-06 17:56:29
【问题描述】：

我正在尝试在弹性框项目的顶部和侧面获取相对元素。

正如你在小提琴中看到的那样，我离实现它不远了。

但似乎图像被向下推，我想粘在弹性框项目的顶部。如果我将 display flex 移除到

这是我的代码

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>

提前感谢您的帮助。

【问题讨论】：

标签： html css flexbox css-position

【解决方案1】：

您应该将.elem-sticker 元素设为absolute 而不是relative，以便将其从文档流中移除，并且不会占用 DOM 中的空间来将图像向下推。

只需将.elem-sticker 更改为position: absolute;，然后将position: relative; 添加到.elem 类以用作锚点。

.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。

【讨论】：