css 固定顶部 怎么用css定义一个固定在页面

html-css020

css 固定顶部 怎么用css定义一个固定在页面,第1张

建议使用css实现,效果更佳,使用position: fixed,固定定位,具体位置的调整是用top、left、right、bottom也可以使用margin调整

css实现代码

<div style="position: fixedtop:100pxleft: autoright: auto bottom: auto" ></div>

一般的网站的浮动广告以及浮动菜单等可以使用fixed来实现,js的话需要计算位置以及滚动条滚动时触发事件从而进行计算使用window.onscroll事件代码如下

HTML部分代码

<div style="position:absolutebackground-color:redwidth: 50pxheight: 50px" id="box"></div>

Javascript部分代码

window.onscroll=function(){

var box= document.getElementById("box")

var t = document.documentElement.scrollTop || document.body.scrollTop

box.style.top=t+"px"

}

HTML5怎么把导航固定在底部的步骤如下:

css的定位样式属性来实现;会用到css中的position:fixed属性,结合来实现。

<style>.foot-menu{width:100%height:60pxbackground:#000position:fixedbottom:0/**距离底部为0*/left:0z-index:1}</style><div class="foot-menu">

<!---导航具体内容-->

</div>

拓展资料

css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍:

1、边框特性

CSS3对网页中的边框进行了一些改进,主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框,通过CSS3的属性可以快速实现圆角定义,同时还可以根据实际情况针对特定角进行圆角定义 。

2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。

1、需要使用固定定位才能做到这样的效果。具体方法是首先打开html编辑器,首先设置一个容器div,然后设置一个用来演示效果的div,分别设置class属性名为container和fixed:

2、在style标签中设置样式,设置container的position属性为相对定位,并且给它一个很高的高度,然后给fixed设置高度和宽度,以及颜色等属性,这里的重点是设置position属性为fixed,以及设置top和left属性控制div的位置,设置完成后保存文件:

3、打开浏览器,可以看到div并且可以观察到进度条是最上面的:

4、接着将进度条拉倒最下面,可以发现div还是在原来的位置保持不变。以上就是用fixed属性设置div固定位置的方法: