悬浮图片之上效果实现

其实很简单，就是一个margin-top的问题，但是需要relative的定位方式才能悬在上面。

html部分

<!-- 简介 -->
<div class="intro">
    &nbsp; <!-- 避免margin-top无效 -->
    <div class="intro-container">
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/chuangxin.png" alt="">
            </div>
            <div class="intro-item-title">
                草帽的创新
            </div>
            <div class="intro-item-content">
                聚集国内外优秀人才， 聚焦新技术及产品研究， 以开放互联的理念， 驱动企业创新发展。
            </div>
        </div>
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/shixianchuangxin.png" alt="">
            </div>
            <div class="intro-item-title">
                实现怎样的创新
            </div>
            <div class="intro-item-content">
                服务全国品牌用户，实现多语言、全球化、全渠道、理想的电商自运营；打造数据标准化，服务标准化的云计算平台，为云生态平台提供坚实的基础。
            </div>
        </div>
        <div class="intro-item">
            <div class="intro-item-icon">
                <img src="/Index/Index/image/innovate/chuangxinbuju.png" alt="">
            </div>
            <div class="intro-item-title">
                创新布局
            </div>
            <div class="intro-item-content">
                战略布局基础云计算、电商云生态，科技大脑、大数据平台四大科技创新方向，为实现草帽电商创新愿景不懈努力。
            </div>
        </div>
    </div>
</div>

css

.intro {
    height: 430px;
    background-color: #FFFFFF;
    .intro-container {
        position: relative; /* 可以让内容悬浮在图片之上 static是position的默认属性，元素会按正常的文档流进行排序，不会受到top，bottom，left，right的影响。 */
        margin:0 auto;
        margin-top:-150px;
        width: 1200px;
        height: 400px;
        //border: 1px solid red;
        display: flex;
        justify-content: space-between; /* 横向中间自动空间 */
        .intro-item {
            width: 380px;
            height: 400px;
            background-color: #FFFFFF;
            box-shadow:0px 13px 32px 0px rgba(0, 0, 0, 0.1);
            .intro-item-icon {
                margin:0 auto;
                margin-top:80px;
                width: 32px;
                height: 32px;
                //background-color: red;
            }
            .intro-item-title {
                font-size: 24px;
                font-weight: bold;
                color:#222222;
                text-align: center;
                margin-top:24px;
            }
            .intro-item-content {
                width: 300px;
                margin: 0 auto;
                margin-top:26px;
                font-size: 18px;
                line-height: 36px;
                color: #666666;
            }
        }
    }
}