DIV absolute与relative简单用法解析

开发 前端
本文向大家介绍一下DIV absolute与relative简单用法,absolute是绝对定位,relative是相对定位,那么它们是如何使用的呢,请看本文详细介绍。

本文和大家重点讨论一下DIV absolute与relative简单用法,我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?请看下文详细介绍。

DIV absolute与relative简单用法

很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面我们就来一一解读。

Absolute,CSS中的写法是:position:absolute;他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

 

一般来讲,网页居中的话用Absolute就容易出错,因为网页一直是随着分辨率的大小自动适应的,而Absolute则会以浏览器的左上角为原始点,不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似,但是还是有本质的区别的。

Relative,CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。


有时我们还需要依靠z-index来设定容器的上下关系,数值越大越在最上面,数值范围是自然数。当然有一点要注意,父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

【编辑推荐】

  1. DIV样式中一些特殊效果用法举例
  2. 解析DIV布局之四大属性用法
  3. Html中DIV和Span的区别揭秘
  4. 使用Div CSS构架的三大好处
  5. DIV CSS居中常见方法解析

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-09-09 15:17:01

absoluterelativeCSS

2010-09-03 13:23:07

absoluterelativeCSS

2010-09-06 16:27:06

CSSabsoluterelative

2009-12-14 13:27:06

Ruby区间

2014-06-19 10:43:37

AndroidScrollerView平滑滚动

2013-06-05 09:37:09

WindumpWindump网络命令

2010-08-31 15:24:43

CSSpositionabsolute

2010-01-12 10:29:41

Fedora apt软

2009-09-10 15:27:16

C# get set

2010-08-24 11:25:06

DIVCSS

2010-09-09 13:25:52

DIVScroll

2010-09-10 13:07:51

CSS DIV绝对定位CSS DIV固定定位

2009-07-24 15:46:00

ASP.NET登陆控件

2010-08-25 14:56:15

CSS相对定位

2010-08-30 10:37:54

DIVSPAN

2010-08-16 11:05:54

DIV+CSS

2024-11-15 00:09:21

2010-08-25 14:45:57

CSS绝对定位

2010-08-17 09:20:28

DIV布局

2010-09-10 09:22:50

DIV布局
点赞
收藏

51CTO技术栈公众号