css之relative和absolute

relative限制定位

　　相对定位限制绝对定位left等属性。

relative限制z-index层级

　　设置两个用绝对定位的div，分别为z-index：1的div1和z-index：2的div2，那么层级div2大于div1。如果用相对定位的div分别为z-index：4的div4和z-index：3的div3，div4为div1的父类，div3为div2的父类，则div1的层级大于div2，可以得出，此时的绝对定位不起作用，相对定位限制了绝对定位。但如果div3的z-index ：auto;div2层级大于div1,因为z-index：auto：不限制absolute元素层叠的问题，但这个问题不包括ie6和ie7,ie6和ie7会出现层叠上下文问题。

overflow与relative、absolute

　　绝对定位下，overflow不起作用；相对定位下，overflow起作用。

relative和absolute与left，top关系

　　left：0；top：0；在relative情况下，表示在原来的位置偏移,所以是没有偏移；在absolute情况下，定位是限制自身的边界定位。

时间： 2024-10-10 08:25:10

css之relative和absolute的相关文章

css的relative与absolute（一）

relative与absolute是position的两个值,本文对这两个值得关系进行了一个小实验 实验一: 首先定义了两个div元素,代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&

css position: relative，absolute详解

关于CSS中 position在布局中非常重要,查了很多资料都说的很难理解,下面说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素. absolute: 对象脱离常规流,使用top,right,bottom,left等属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折

css定位relative，absolute

转自http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1.先解释一下文档流 就是HTML的一种机制,块元素单独占一行(比如   div),内联元素不换行(a标签,img标签): 2.几种定位方式 2.1   static HTML默认定位方法,服从文档流(flow),自适应的,不需要我们设置. 2.2 relative 相对定位,相对于自己原来的位置(参照物是自己),可以使用bottom,top,left,righ

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-

css position 应用（absolute和relative用法）

1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位.可以选取具有定位的父级对象(下文将说到relative与absolute的结合使用)或者body坐标原点进行定位,也可以通过z-index进行层次分级.absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的,当设定TRBL值后则根据浏览器的左上角作为原始点.具体案例如下: <!DOC

怕忘记了CSS中position的absolute和relative用法

CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位,在实际设计中还是非常有用的.但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用,非常打脑壳 不管再咋个打脑壳,大家首要的还是记住position的几个属性值 static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,r

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

CSS关于定位float、static、relative、absolute、fixed

html的对象是按照文档流的方式,从上而下,从左往右的布置对象/元素. static: 元素默认的定位方式,遵从基本的html布置规则 relative:相对定位,相对哪个对象呢? 相对的是元素本身的位置 <div class="div5"></div> <div class="div7"></div> <style>     div{         width:300px;         height

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm   解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)