时间戳

首页 > 解决方案 > 如何在引导程序中将卡放在图像上？

html - 如何在引导程序中将卡放在图像上？

问题描述

我现在正在做一个网站。我尝试了几次将卡片放在图片上。你有什么建议吗？ https://i.stack.imgur.com/goigA.png

标签： htmlcsswebbootstrap-4responsive

解决方案

一种方式设置为负margin-top，例如：margin-top : -100px

.tag {
    position: relative;
    left: 0px;
    background-color: green;
    z-index: 1000;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}
.d-flex{
display: flex;
}
<div class="container">
    
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png">
    <div class="d-flex">
    <div class="tag">Featured</div>
    <div class="tag">Featured</div>
    <div class="tag">Featured</div>
    <div class="tag">Featured</div>
    </div>
    
</div>

推荐阅读