html中绝对定位与相对定位_div相对定位和绝对定位的区别

目录：

• 1、DIV+CSS中的绝对定位和相对定位的区别~~~
• 2、CSS+DIV里面相对定位和绝对定位的区别
• 3、CSS+DIV相对定位和绝对定位的区别和联系
• 4、div中相对定位与绝对定位的区别的详解，他们之间的专用属性有那些

DIV+CSS中的绝对定位和相对定位的区别~~~

先看一下定义

position:relative|absolute|static|fixed

◆static没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

◆relative不脱离文档流，参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级。

◆absolute脱离文档流，通过top,bottom,left,right定位。选取其最近的父级定位元素，当父级position为static时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

◆fixed固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

一般来说

relative就是相对定位 他位置是参照自身原来的位置定位的,定义中说"不脱离文档流"就是说文档会预留原来的位置.

注意的是absolute绝对对定位:

他参照的定位分两个情况:

1.父对像没有设置position或position为static;它参照的就是body坐标原点.

2.其它时候时候它参照的是父对像的左上角坐标.

CSS+DIV里面相对定位和绝对定位的区别

呵呵、不用客气、我帮你解释下吧

举个例子、、

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

!--

#main{ border: 1px solid #00CE67; width : 400px; height : 400px; background-color : #F5FFEC; position:relative;}/*position:relative;这是相对定位、通俗点说就在一个div或者其他元素里面用了相对定位之后、那么这个div或者元素它就成为了一个目标参照物；可以给下面它的子类提供参照目标。*/

h2{ position:absolute; bottom:5px; right:5px;}/* position:absolute;这是绝对定位，它是参照父类的位置来确定自己的位置的，比如这里设置它的下边是5px，右边5px，那么它就会出现在给它提供参照的父类div #main的里面的距离右边5px、下边5px的地方*/

--

/style

/head

body

div id="main"

h2绝对定位/h2

/div

/body

/html

CSS+DIV相对定位和绝对定位的区别和联系

相对定位就是相对于当前位置来进行定位，比如“东南方5公里”，就是从当前位置开始，往东南方向走5公里，就到达目的地，也就是说，这个目的地是不固定的，要根据当前所处位置来定。

而绝对定位就是指定一个绝对位置来作为目的地，比如“东经xxx度，北纬yyy度”，或者“广东省广州市xxx区yyy路zzz号”，这个位置就是固定的，不管你当前身处何地，这个目的地都是不变的。

css中的相对定位和绝对定位也是同样的道理。比如

div style="position:relative; left:20px; top:10px"这是从当前位置（默认位置）往左移20像素，往下移10像素/div

div style="position:absolute; left:20px; top:10px"这是移到离自己最近的具有定位属性（相对或绝对）的上级元素（如果没有则是当前窗口）的左边20像素上边10像素的位置。/div

div中相对定位与绝对定位的区别的详解，他们之间的专用属性有那些

position:absolute; 绝对定位

position:relative; 相对定位

绝对定位是指你所定义该样式的板块以你浏览器的边框作为参照物来放置他的位置；

相对定位是指你所定义该样式的板块以该板块外层板块(也就是子级板块对父级板块)为参照物来放置他的位置，如果不了解的话可以百度hi我

标签：div相对定位和绝对定位的区别