css固定定位于绝对定位的区别

我们在进行网页的内容排布时,新手估计会为绝对定位和固定定位的差别有所混淆,下面就来解释下他们之间的区别吧。

操作方法

  • 01

    绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去原本的位置,并且以父级为基准(父级元素必须是相对定位如果不是则一直往上找,直到找到body为止)来进行偏移, 固定定位其实和绝对定位有很多相似之处只不过是基于当前页面来偏移。

  • 02

    我们可以用代码来验证代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #gd{ width:500px; height:500px; background:red; position:fixed; } #jd{ width:300px; height:300px; background:blue; position:absolute; left:400px; top:1000px; } </style> </head> <body> <div id="jd"> 我是绝对定位 </div> <div id="gd"> 我是固定定位 </div> </body> </html>

  • 03

    以上代码的效果如下

  • 04

    下拉滚动条可以看出固定定位始终保持在左上角并且固定定位显示的优先级高于觉都定位

  • 05

    总结:固定定位于绝对定位最根本的区别还是偏移基准的不同固定定位是相对于屏幕而绝对定位的基准则是父级元素,而且最好还要注意ie6不兼容固定定位而兼容绝对定位

(0)

相关推荐

  • CSS 相对定位和相对定位的区别

    css布局中的 position:static|absolute|fixed|relative 的4中属性 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absol ...

  • 宽带固定IP地址和无固定IP地址的区别

    操作方法 01 宽带根据用户大体上可以分为2大类: 1.企业用户 2.个人用户. 企业用户 : 企业用户分为大型用户和小型用户,1.大型用户因为业务量比较大,需要客户访问自己的网站,对网络的要求也随之 ...

  • 用CSS怎么设置网页的背景色

    下面咱们来看看用css怎么设置网页背景颜色. 操作方法 01 首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句.<html><body></body> ...

  • HTML——DIV定位篇

    定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美.定位的定义: 在CSS中关于定位的内容是:p ...

  • 让wifi上网速度更快的方法 / 路由器的安装位置

    wifi在生活中现在的越来越重要,怎样让wifi信号更好,下面给出七条方法,让wifi上网速度更快. 操作方法 01 把路由器放在经常上网的房间 最好把路由器放在桌上或书架上,且最好是放在开阔的地方, ...

  • 彻底弄懂css中单位px和em,rem的区别

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) 国内的设计师大都喜欢用px,而国外的网站大都喜欢用e ...

  • ie6 ie7 ie8 ie9和FireFox Chrome中css区别总结

    操作方法 01 1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 t ...

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

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

  • CSS设置DIV的定位绝对定位和相对定位

    设置DIV或者其他元素在浏览器中显示的位置是HTML布局中重要的一个内用,我们通过合理的布局使得我们的网站美观大方,这里我就来说说如何使用CSS来给div定位. 操作方法 01 首先我不给div定位来 ...