固定定位设置宽高却遮挡底部模块问题

Question

html部分

 <div class="search_module">
        <div class="search_module_hd">
            <a href="" class="sort"></a>
            <div class="search_con"></div>
            <a href="" class="register"></a>
        </div>
        <div class="search_module_bd">
            <form action="">
                <span></span>
                <input type="search">
            </form>
        </div>
    </div>
    <div class="banner">
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
        <span>123</span>
    </div>

less部分

@base_font : 50;
.search_module {
    width: 15rem;
    height: (180rem/@base_font);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f9dc63;
    .search_module_hd {
        height: (88rem/@base_font);
        display: flex;
        .sort {
            width: (36rem/@base_font);
            height: (60rem/@base_font);
            margin: (20rem/@base_font) (25rem/@base_font) 0;
            background: url(/images/sort.png) no-repeat;
            background-size: (36rem/@base_font) (60rem/@base_font);
        }
        .register {
            width: (36rem/@base_font);
            height: (60rem/@base_font);
            margin: (20rem/@base_font) (25rem/@base_font) 0;
            background: url(/images/user.png) no-repeat;
            background-size: (36rem/@base_font) (60rem/@base_font);
        }
        
        .search_con {
            flex: 1;
            background: url(/images/animate.gif) no-repeat center center;
            background-size: (390rem/@base_font) (76rem/@base_font);
        }
        
    }
    .search_module_bd {
        height: (92rem/@base_font);
        position: relative;
        span {
            position: absolute;
            top: 12px;
            left: 30px;
            color: #cccccc;
            &::after {
                content: '';
                font-family: 'icomoon';
                display: inline-block;
                width: (16rem/@base_font);
                height: (16rem/@base_font);
            }
        }
        
        input {
            margin: (5rem/@base_font) (20rem/@base_font);
            width: (702rem/@base_font);
            height: (66rem/@base_font);
            border-radius: (30rem/@base_font);
            box-sizing: border-box;
            padding-left: (40rem/@base_font);
            font-size: (20rem/@base_font);
            border: 0;
            outline: none;

        }
    }
}
.banner {
    width: 15rem;
    height: (284rem/@base_font);
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    span {
        width: 3rem;
        height: (142rem/@base_font);
    }
}

Answer 1

padding-top解决margin会导致固定定位坍塌
https://blog.csdn.net/WiseGirls/article/details/108581508