position:fixed之后的div继续占据位置，div不定高

.Input-Nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: white;
    }

    .input {
        margin-top: 5px;
        display: flex;
    }

    .nav {
        margin: 5px 0;
    }

    .input>view:nth-child(1),
    .input>view:nth-child(3) {
        width: 10%;
        float: left;
        text-align: center;
    }

    .input>view:nth-child(2)>.iconfont {
        float: left;
        color: darkgray;
    }

    .input input {
        width: 70%;
        float: left;
    }

    .input>view:nth-child(2) {
        background-color: rgb(247, 247, 247);
        overflow: hidden;
        float: left;
        width: 80%;
        padding-left: 10px;
        box-sizing: border-box;
    }

    .scroll-view_H {
        width: 100%;
        white-space: nowrap;
    }

    .nav text {
        margin: 0 10px;
    }

    .navColor {
        color: red;
    }
    .swiper image{
        width: 100%;
    }



    export default {
        data() {
            return {
                reds: { //请求的数据
                    category: [], //导航栏
                    data: [] //0是轮播图，1是轮播图下的小图标，2是商品列表上的3个图片，3是不知道，4是商品列表
                },
                nav: "1",
            }
        },
        onLoad() {
            let that = this
            uni.request({ //首页数据
                url: 'http://ceshi3.dishait.cn/api/index_category/data',
                success: (res) => {
                    console.log(res)
                    that.reds = res.data.data
                }
            });
        },
        methods: {

        }
    }




<template>
    <view id="content">
        <view class="Input-Nav">
            <view class="input">
                <view>
                    <text class="iconfont">&#xe621;</text>
                </view>
                <view>
                    <text class="iconfont">&#xe632;</text>
                    <input type="text" placeholder="智能积木 越野四驱车" />
                </view>
                <view>
                    <text class="iconfont">&#xe60e;</text>
                </view>
            </view>
            <view class="nav">
                <scroll-view class="scroll-view_H" show-scrollbar="true" scroll-x="true">
                    <text :class="[nav == item.id ? 'navColor' : '']" v-for="item in reds.category"
                        :key='item.id'>{{item.name}}</text>
                </scroll-view>
            </view>
        </view>
        <view class="content">
            <swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3000" duration="500">
                <swiper-item v-for="item in reds.data[0].data">
                    <image :src="item.src"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

App.vue的样式

    /*每个页面公共css */
    * {
        margin: 0;
        padding: 0;
    }

    @font-face {
      font-family: 'iconfont';  /* Project id 2537631 */
      src: url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.woff2?t=1628821739001') format('woff2'),
           url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.woff?t=1628821739001') format('woff'),
           url('https://at.alicdn.com/t/font_2537631_dx47wskjxnj.ttf?t=1628821739001') format('truetype');
    }

    .iconfont {
        width: 7vh;
        font-family: "iconfont" !important;
        font-size: 25px;
        color: black;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

你这个什么类型的项目？微信小程序或者浏览器都有调试工具。浏览器测试你的代码没问题，可以浮动不占位

使position:fixed不与其他div重叠 ,fixed所在div高度不变和可变两种情况
使position:fixed不与其他div重叠 ，fixed所在div高度不变和可变两种情况_JettyLu的博客-CSDN博客 由于fixed会使元素脱离文档流，让该div不与其他div重叠有两种方法高度固定的情况方法一：设置下方区域的padding-toppadding-top: XXpx方法二：设置fixed所在div的top和leftposition: fixed;top: 0;left:0;以及下方区域的margin-top高度可变的情况需要获取fixed的div的动态高度：方法一：设置设... https://blog.csdn.net/qq_41836598/article/details/102609299

麻烦题主发可以测试的代码，要不无法定位问题所在。fixed还需要和left/top搭配使用才行，DEMO如下

<!doctype html>
a
a
<div>xxxxxxxx</div>
a
a
<div style="position:fixed;background:#eee">fixed内容，未设置left/top，会在原位置</div>
bbb
<div>xxxxxxxx</div>
b
ab
<div style="position:fixed;background:#aaa;left:20px;top:20px">fixed内容，设置left/top，会滚定在指定位置</div>
<div>xxxxxxxx</div>
a
ba

img

起码吧css和html发出来啊