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

css布局中的 position:static|absolute|fixed|relative 的4中属性

从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(absolute),固定(fixed),相对定位(relative)。在这个教程里,我不逐一讲,只讲最常用也是最实用的两个定位方法:绝对定位(absolute)、相对定位(relative)。

绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

我刚开始写样式的时候,很容易在position:absolute出现错位了,纠结了1年之后,基本上写的样式兼容ie各个版本,火狐浏览器,谷歌浏览器,360浏览器等主流浏览器。

position:static是默认的属性。

absolute:尽量不要使用left:px。。right:px等属性。尽量使用margin-left:多少px;这样不容易错位。

fixed:是固定死的。无论你浏览器上下如何滚动,距离浏览器器的具体都不会改变的。

relative:相对定位。

以下是demo1:

层级关系为:

为改变参照物(橘色框)后的效果层级关系为:

参照物为最顶级的元素情况。层级关系为:

(0)

相关推荐

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

    我们在进行网页的内容排布时,新手估计会为绝对定位和固定定位的差别有所混淆,下面就来解释下他们之间的区别吧. 操作方法 01 绝对定位中当一个DIV块的位置被定义为绝对定位的时候,也就失去了文档流即失去 ...

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

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

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

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

  • css 相对定位

    操作方法 01 css绝对定位使你能精确地定位要素在页面的 独立位置,而不考虑页面其它要素的定位 设置.相对定位指你所定位的要素的位置相对于 它在文件中所分配的位置.例: I { position: ...

  • HTML中怎样区别绝对定位和相对定位呢?

    网页布局经常用到相对定位和绝对定位,但是有些小伙伴对于相对定位和绝对定位还不是很了解,今天小编我就来给大家深入分析分析. 操作方法 01 如图,书写两个div,一个div里面包含有另一个div,并且分 ...

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

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

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

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

  • 在css中,relative和absolute的区别

    操作方法 01 relative是相对定位,相对于本身的位置,元素的位置通过 "left", "top", "right" ,"b ...

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

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