理解position 绝对定位和相对定位

一、position的三种取值

1、取值

Position :   static /  absolute / fixed / relative
static:静态   absolute:绝对定位    fixed:固定   relative:相对定位

默认情况下:static             无特殊定位,对象遵循HTML定位规则

absolute : 将对象从文档流中抽出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed :  E5.5及NS6尚不支持此

2、理解relative和absolute取值

(1)relative

不脱离文档流、对象不能重叠、依据left;right;top;bottom(四个至少有一个存在具体的值)等属性在正常文档流中偏移自身位置(换言之,相对于自己定位的)

(2)absolute

脱离文档流、然后使用left;right;top;bottom(四个至少有一个存在具体的值)等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位,如果父级对象没有设置定位属性,那么将遵循HTML的定位规,以body的左上角为参考进行定位、

绝对定位的对象可以重叠,层叠的顺序可以通过z-index属性进行控制,大的在上面  

二、relative和absolute的区别

1、是否完全脱离了文档流

2、relative是相对于自己进行偏移定位,absolute是相对于最近具有定位设置的父级对象进行绝对定位

3、对象是否能重叠的问题(z-index改变层级关系)

【题外话】最近定位用的挺多的,例如导航菜单为了有点效果,通过相对定位让它看起来有点特别,还有一些效果,对联式的广告悬浮框、还有回到顶部等。不错不错,good good study,daydayup!

时间: 2024-08-03 12:16:08

理解position 绝对定位和相对定位的相关文章

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

css position 绝对定位和相对定位

position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置. position:relative是相对定位,是相对于前面的容器定位的.这个时候不能用top left在定位.应该用margin. 比如:<div class="1"></div><div class="2">

深入浅出理解绝对定位和相对定位

原文地址:http://www.360doc.com/content/10/0814/18/1001775_46037316.shtml 概要: 本文主要描述XHTML中相对定位和绝对定位各自的本质.用法.区别和两者之间的关系.以及使用CSS的Left.Right.Top.Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法. 说明: 占位空间:元素在文档流中所占据的空间. 物理空间:元素本身所占据的空间. 下面分3种情况分别对相对定位和绝对定位进行讨论: 1.

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position:absolut; 1.相对定位(div与div之间的关系)        body 标签其实就是一个大的盒子,在body里面设置 两个盒子div1 和 div2 ,而且两个盒子都给了它一个相对定位:position:relative;,那么div2 就会相对于 div1 排版,排在div1的下面,

理解绝对定位和相对定位布局

[p=22, null, left]概要:本文主要描述XHTML中相对定位和绝对定位各自的本质.用法.区别和两者之间的关系.以及使用CSS的Left.Right.Top.Bottom属性(偏移属性)和Margin属性(外边距)对定位块级元素进行布局的方法. [p=22, null, left]说明:占位空间:元素在文档流中所占据的空间.物理空间:元素本身所占据的空间.[p=22, null, left]下面分3种情况分别对相对定位和绝对定位进行讨论:1.只使用css第一组属性布局定位元素的情况2

【转载】CSS之绝对定位及相对定位

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

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素

css中的绝对定位与相对定位

1.绝对定位 元素没有设定position属性,但依旧具有position属性,其值为static 绝对定位的元素从文档流中删除,并相对于其最近的position属性为absolute.relative.fixed的祖先元素定位,若没有这样的祖先元素,则根据浏览器定位,元素原来在文档流中的控件被关闭,其层叠通过z-index属性决定,此时对象不具有边距(margin) <div class="content"> <div class="redBlock&qu

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构   -   TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对