首页 > 软件开发 > HTML >

html怎样让div固定在顶部位置

来源:互联网 2023-03-16 19:13:28 167

html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

工具/原料

  • 电脑
  • 记事本

方法/步骤

  • 1

    新建一个记事本,制作一个简易的可以上下滑动的网页,如图k4W办公区 - 实用经验教程分享!

    0html设置图片自适应屏幕宽度k4W办公区 - 实用经验教程分享!

    1html网页中怎么写插入图片的代码k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 2

    新建一个div,设置背景色,宽和高,代码如下k4W办公区 - 实用经验教程分享!

    div style="background-color: #fff000;width:100%;height:50px;position:fixed;">这是导航栏k4W办公区 - 实用经验教程分享!

    /div>k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 3

    我们可以看到现在滑动一下页面,黄色头部就不见了k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 3本页面未经许可获取自百度经验
  • 4

    这里我们需要用到代码position:fixed; ,效果如下k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 5

    但是我们可以看到现在窗口还是有点问题,加上top:0px; ,让它和顶部距离为0k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 6

    我们看效果,完成k4W办公区 - 实用经验教程分享!

    html怎样让div固定在顶部位置k4W办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!k4W办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码