【webQD】☆★之详解position: absolute、relative
首先我们来看一下W3C对position的解释:
我们再看，W3C对position属性值的解释:
ok,我们需要了解的是:
其中absolute和relative是最常用的，fixed用得也比较多（其中IE6并不支持fixed）。
1、absolute（绝对定位）
absolute是生成觉对定位的元素，脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index 进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点。也就是这样的解释:
当设定position:absolute
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位。
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
如果不设定TRBL属性值，那么当前absolute就会以父级左上角为原始点定位
ok，看下面这段代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>position:absolute定位</title>
<style type="text/css">
html,body,div{margin:0;padding:0;list-style:none;}.center{margin:30px;border:red solid 10px;width:400px;height:300px;}.div1{width:200px;height:200px;background:green;/*设定TRBL*/position:absolute;left:0px;top:0px;}.div2{width:400px;height:300px;font-size:30px;font-weight:bold;color:#fff;background:blue;}</style>
</head>
<body>
<div class="center">
<div class="div1"></div>
<div class="div2">position:absolute定位测试</div>
</div>
</body>
</html>
|
示例图:
接下来我们去掉left,top的值:
|
1
2
3
4
5
6
7
|
.div1{ width:200px;
height:200px;
background:#0099FF;
/*没有设定TRBL*/
position:absolute;
}
|
那么我们恢复left,top,但是在父及加上position属性
代码改为这样:在center加上position属性:值为absolute;或者是relative都行
|
1
2
3
4
5
6
7
|
.center{margin:30px;border:red solid 10px;width:400px;height:300px;position:absolute;} |
效果如下:
因此我们可以看出:
如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位。
如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
如果不设定TRBL属性值，那么当前absolute就会以父级左上角为原始点定位
2、position: relative
参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在 父级内容区中的上一个元素进行偏移）
无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占 据原来的空间。因此，移动元素会导致它覆盖其他框。
ok，我们来看下一段代码:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>position:relative定位</title>
<style type="text/css">
html,body,div{margin:0;padding:0;list-style:none;}.center{margin:30px;border:red solid 10px;width:400px;height:300px;background:#FFFF00;}.div1{width:200px;height:150px;background:green;position:relative;top:-20px;left:0px;}.div2{width:400px;height:150px;font-size:30px;font-weight:bold;color:#fff;background:blue;}</style>
</head>
<body>
<div class="center">
<div class="div1"></div>
<div class="div2">position:relative定位测试</div>
</div>
</body>
</html>
|
效果如下:
ok,我们修改一下代码,假如没有父级呢？我们需要先给body设置一下:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>position:relative定位</title>
<style type="text/css">
body{margin-left:20px;margin-top:60px;list-style:none;width:900px;height:300px;background-color:black;}.div1{width:200px;height:150px;background:green;position:relative;top:-20px;left:0px;}.div2{width:400px;height:150px;font-size:30px;font-weight:bold;color:#fff;background:blue;}</style>
</head>
<body>
<div class="div1"></div>
<div class="div2">position:relative定位测试</div>
</body>
</html>
|
当然，如果使用relative相对定位的话，一般是相对于父级元素定位的，一般使用属性是margin-left,margin-top，
ok,到这里我想大家对于position属性基本上了解差不多了吧？
当然在实际前端开发中一般对于定位而言:absolute，relative是交叉使用的。
再来一局总结(网友总结的话):
属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的父级对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间 而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。其实对于定位的主要问题是要记住每个定位的意义。相对定位是“相对于“元素在文档流中初始位置的，而绝对定位是”相对于“最近的已经定位的元素。
贴这么图和代码，累死我了，亲，留个言呗！
相关推荐
今天在看CSS的时候遇到了position: absolute、relative的问题，一直比较迷糊，今天终于搞清楚了。
外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。 2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如...
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。 1、position: static static(没有定位)是position的默认值，元素处于正常...
offsetParent定义：那么offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元 素 2. 根据定义分别存在以下几种情况 ...
position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍。 相对定位 相对定位：让元素相对于自己原来的位置，进行位置...
CSS之Position详解 CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑。CSS中主要难以理解的...
HTML的relative与absolute区别：说实话html这门语言算的上是这个世界上最简单的一门语言了，标签语言嘛，就是标签多了点英文单词超多，不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是...
但是涉及到弹出层、浮层、页面广告插件等等，都需要CSS中的position属性来定位了，对于初学者来说经常分不清楚是应该用position属性的absolute值、relative值、fixed值等等，下面我们就position属性基本的这三个值的...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在本文中，任何一个元素都被文本流所限制了自身的位置，但是...
在CSS中关于定位的内容是:position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在本文中，任何一个元素都被文本流所限制了自身的位置，但是...
position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。我今天重点要说的就是sticky属性 position:sticky用法 position:sticky 被
position:relative; /*启用相对定位*/ left:150rpx; /*相对于自己往右偏离150*/ top:50rpx; /*相对于自己往下偏离150*/ 绝对定位： position: absolute; left: 50rpx; top: 50rpx;
2.absolute 3.fixed 4.static 下面分别讲述这四个属性。 <div id=sub1>sub1 <div id=sub2>sub2 1. relative relative属性相对比较简单，我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的...
•relative •fixed •absolute •sticky 然后使用top，bottom，left和right属性定位元素。但是，除非首先设置position属性，否则这些属性将不起作用。根据位置值，它们的工作方式也不同。 position:static; 默认...
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
positon有4个属性:static relative absolute fixed，我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么...
relative：相对定位，相对自己原来的位置进行定位 fixed：绝对定位，相对浏览器窗口进行定位(fixed定位会让元素一直处于浏览器某个位置，不会随着滚动条滚动而变化) 由position引起的层级关系问题 首先我们要知道...
所谓”被定位的元素”，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。 该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位...