如何让DIV固定在页面而不随着滚动条随意滚动

html-css021

如何让DIV固定在页面而不随着滚动条随意滚动,第1张

1、首先我们新建一个web项目,主要用到了html文件和css文件。

2、然后在html文件中,有图中的代码,引入css文件和设置一个div标签。

3、然后这里是css样式文件,主要看图中红框中内容,使用fixed定位方式。

4、然后运行项目后,可以看到div在右下角。

5、然后滑动滚动条,即使到达底部后,div的位置依旧没有修改。

6、如图所示,这里将div的css样式设置为绝对定位,这里是靠右靠下。

7、然后这里是根据滚动条的滚动设置top或者bottom的值即可实现让DIV固定在页面而不随着滚动条随意滚动。

用定位,例:

<div class="top"></div>

<div class="bottom"></div>

css:

.top{width:300pxheight:100pxbackground:#000}

.bottom{width:300pxheight:100pxbackground:#090position:relativeleft:50pxtop:-50px}

你把代码粘到相对应的文件中看看效果就知道了

1、能够使代码精简,使用div+css布局使代码很是精简,css文件可以在网站的任意一个页面进行调用,避免了使用table表格修改部分页面。

2、提升了网页访问速度,div+css布局较传统的Table布局比较,减少了许多代码,其浏览访问速度自然得以提升,从而提升了网站的用户体验度。

3、有利于优化。采用div-css布局的网站对于搜索引擎很是友好,简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

4、浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题,主要原因是不同的浏览器对web标准默认值不同。

5、需要注意的是,网页不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。