html css 返回顶部按钮位置怎么固定?

html-css08

html css 返回顶部按钮位置怎么固定?,第1张

可以使用相当于浏览器定位。css样式中写入:\x0d\x0a{position: fixed\x0d\x0a right: 20px\x0d\x0a bottom: 100px}相当于浏览器右边20px,浏览器底部100px的距离的定位。\x0d\x0afixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

建议使用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"

}

1、新建一个html文件,命名为test.html

2、在test.html文件内,使用css设置页面所有的div宽度为300px,高度为300px,div的位置为绝对定位。

3、在test.html文件内,创建三个div,并用文字标识,分别为底层div、中层div、最顶层div。

4、在test.html文件内,分别给三个div设置class属性为one、two、three,用于下面对类名进行样式设置。

5、在css标签内,设置类名为one的div样式,设置其背景颜色为红色,距离页面左边缘为0,距离页面上边缘为0,同时使用z-index设置其层级为1。

6、在css标签内,设置类名为two的div样式,设置其背景颜色为黄色,距离页面左边缘为50px,距离页面上边缘为50px,同时使用z-index设置其层级为2,即在类名为one的div的上面。

7、在css标签内,设置类名为three的div样式,设置其背景颜色为粉红色,距离页面左边缘为100px,距离页面上边缘为100px,同时使用z-index设置其层级为3,即在页面三个div中的最顶层。

8、在浏览器打开test.html文件,查看实现的层级效果。