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

相信很多小伙伴不懂得HTML中css怎样让div固定位置,比如导航条固定在顶部等,今天小编我就来分享一下,其实div固定位置的原理非常简单。

操作方法

  • 01

    如图,给要固定的div添加类名,小编我就给div添加top这个类名。

  • 02

    假设我们的导航条宽高如图所示,然后给导航条设置颜色。

  • 03

    这样,我们的导航条就制作好了,接着开始固定导航条div的位置。

  • 04

    如图,给导航条所表示的div添加“position”属性。

  • 05

    然后把导航条的position属性设置为“fixed”,表示的是固定定位了。

  • 06

    接着我们在设置导航条的“top”属性为0,表示导航条跟浏览器顶部的距离为0,如果是其他数值,则会拉开一些距离。

  • 07

    总的来说,就是给div设置好fixed,然后top为0就可以固定位置了,非常简单,快去动手练练吧!

(0)

相关推荐

  • Axure怎么制作页面滚动时菜单固定在顶部的页面

    Axure可以制作出保真度相当高的原型,除了页面布局.UI以外,其强大的交互设计能力让这些本来静止的元素高效交互起来,形成以假乱真的高保真原型.本文介绍如何做一个在滚动中将菜单固定在顶部的页面,属于中 ...

  • Win10如何固定桌面图标位置?Win10固定桌面图标位置的方法

    许多用户的桌面上会摆放着许多程序图标,并且喜欢将这些图标区分开摆放.最近使用win10系统的用户反应桌面上摆放好的图标会自动打乱,无法将图标位置固定住,该怎么办呢?下面小编就给大家带来Win10固定桌 ...

  • css如何设置div固定在底部

    css提供了一个position: fixed的属性,通过这个属性可以设置div固定在浏览器底部. 操作方法 01 新建一个html页面,然后在这个html代码页面创建一个<div>标签, ...

  • 如何自由拖拽电脑桌面图标,固定在特定位置

    下面教大家如何在电脑上自由拖拽电脑桌面图标,固定在特定位置,很简单哦. 操作方法 01 电脑空白处右键点击查看,如下图所示. 02 然后点击自动排列图标,把前面的对勾去掉,如下图. 03 没有前面的对 ...

  • Excel标题栏始终固定在顶部 冻结标题栏

    在编辑比较长的表格时,由于看不到标题,在输入后面的内容时会给我造成一些不便.有没有办法 让标题栏固定不动,滚动鼠标时只有表格内容滚动呢,答案是肯定的,现在小编就和大家 分享如何冻结标题栏,让标题栏始终 ...

  • 图图桌面的图标固定位置

    图图桌面美化软件的图标在左右拖动的时候,会移动位置,如果在图标整齐排列好后,不想让图标因不小心的拖动而改变了位置,我们可以固定图标的位置。 1.右击图图桌面面板,点击【固定图标位置】。(如图) 2.固 ...

  • 搜狗输入法第一个字固定位置

    搜狗输入法为什么要第一个字固定位置,因为现在打字的人速度太快,固定第一个位置,是便于自己的个人习惯,更便于打字,也避免的了出错.当然也可以取消固定. 搜狗输入法第一个字固定位置方法/步骤 01 首先, ...

  • 如何固定word文档中图片的位置

    如何固定word文档中图片的位置呢?很多人都不会,下面小编来教大家. 操作方法 01 首先,我们打开一个word文档,然后点击插入: 02 之后我们点击图片: 03 弹出的界面,我们点击选择一张图片, ...

  • div中的相对定位与绝对定位

    操作方法 01 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行 ...