新人求助，div 模块问题，麻烦大家帮我看一下问题出在哪？

问题可以说又简单又复杂

我在用template里创建了多个div，

想着分上中下布局，在”head”里定义了上布局，

然后在”head”在下面想做一个搜索框，另外再写一个div “search”

但是”search”的样式定义好了，放在与”head”同级并列，

却不可以显示出定义好的样式，

然而放在”head”里面，又能正常显示。

下面二图是运行情况，以及开发者模式检查。

第二张图显示，”search”并没有样式应用到。

请问这是什么原因？

<template>

    <div class="container_global">
        <div class="head">
            <div class="return"><span style="color:#1989fa">&lt;&ensp;返回</span></div>
            <div class="title">选课</div>
        <div class="search">
                1234
        </div>
        </div>
        <div class="search">
                1234
        </div>
    </div>
</template>

<style lang="less" scoped>
.container_global{
    height: 180vw;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ebedf0;
}
.head{
    height: 11vw;
    width: 100%;
    background-color: white;
    .return{
        float: left;
        width: 12vw;
        height: 6vw;
        position: absolute;
        left: 6vw;
        top: 3vw;
        font-size: 3.5vw;
        font-family: 'Mircosoft Yahei';
        font-weight: bold;
    }
    .title{
        float: left;
        width: 8vw;
        height: 6vw;
        position: absolute;
        font-size: 4vw;
        left: 50%;
        top: 2.5vw;
        transform: translateX(-50%);
        font-family: 'Mircosoft Yahei';
        font-weight: bold;
    }
.search{
    height: 12vw;
    width: 100%;
    background-color: white;
    position: absolute;
    top: 50%;
}
}
</style>