position:fixed元素定位，如何不影响下面的布局

最新推荐文章于 2024-07-12 16:38:52 发布

凌晨程序猿

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量1.7w

点赞数 14

文章标签： css html 定位

本文链接：https://blog.csdn.net/qq_44920883/article/details/105617911

版权

position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响
fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移；
解决方法：
1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用)

```bash
  <style type="text/css">
        div,ul,li,p{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        li{
            list-style: none;
        }
        /*最外层设置一个相同的宽高*/
        .nav_headir{
            width: 100%;
            height: 60px;
        }
        .nav{
            width: 100%;
            height: 60px;
            font-size: 14px;
            font-weight: bolder;
            font-family: 微软雅黑;
            color: black;
            border: 1px solid silver;
            z-index: 99;
            position: fixed;
            top: 0;
            left: 0;
        }
        .nav_box{
            width: 550px;
            height: 100%;
            margin: 0 auto;

        }
        .nav_box ul{
            display: flex;
            justify-content: space-between;
        }
        .nav_box ul li{
            float: left;
            line-height: 50px;
            cursor:pointer;
        }
        .nav_box_t{
            width: 100%;
            height:200px ;
            background-color: pink;
            position: absolute;
            top: 60px;
            left: 0;
            display: none;
            z-index: 99;
        }
        .center_box{
            height: 80px;
            width: 100%;
            background-color: black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="nav_headir">
    <div class="nav">
        <div class="nav_box">
            <ul class="nav_item">
                <li><a href="#">8系列</a>
                    <div class="nav_box_t">

                    </div>
                </li>
                <li><a href="#">7T系列</a>
                    <div class="nav_box_t">

                    </div>
                </li>
                <li><a href="#">商城</a>
                    <div class="nav_box_t">

                    </div>
                </li>
                <li><a href="#">品牌</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">零售店</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="center_box">
 </div>
</body>
</html>

2.在最外层div设置margin-top或者margin-bottom，与fixed相同的高度就行(二选一就行)

  .nav_headir{
  
           margin-top: 60px;
           /*margin-bottom: 60px;*/
        }

3：在同一级下增加一个div,设置同样的宽高

 .center{
            width: 100%;
            height: 60px;
        }

<div class="center">

</div>

以上内容仅提供思路和参考学习！

凌晨程序猿

关注

14
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
position:fixed元素定位，如何不影响下面的布局

position:fixed；一般是用来定位头部导航栏，固定头部在最上方的位置，不会因为页面滚动产生影响fixed是一个绝对定位的元素，是相对于整个浏览器窗口进行定位，相对定位一旦移动就会不占据原来的位置，后面的元素就会向上位移；解决方法：1.在fixed定位的元素最外面一层div，并设置一个相同的宽高(推荐使用)```bash <style type="text/css"&gt...
复制链接

扫一扫