`

CSS定位

    博客分类：
  • CSS
 
阅读更多
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？

对于position的其它几个属性，我都搞懂了
引用

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


对于文档中所说的几个属性，除了relative，其它的一试，就效果出来了，对于个relative，真是难理解。

要说是相对定位嘛，也不是。

对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧?

不过在现实开发中，我却常常 得不到预期的效果。我觉得应该是我对这个属性还没有理解透。现在我想完全掌握这个，就像position:absolute那样地掌握它，想怎么弄html元素就怎么弄HTML元素。
请理解这一点的朋友们给讲讲，或者给点资料，链接之类 的也可以。

谢谢您们。
问题补充：
谢谢您 提供的链接，不过它没有深度，我希望得到position:relative的详细的理解。
问题补充：
reeze，你说的这一点很好。
不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。
问题补充：
就没有大大给点根本的解释吗？

采纳的答案

2008-11-02 ice-cream (初级程序员)

"对于页面中一个static的div#demo，我想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该是用这个position:relative这个吧，然后再加上top,right给限制一下。
我理解得没有错吧? "

首先对你疑惑的地方，我先解答一下：
position的默认值是static，（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方，应该给#demo相对定位，#sub绝对定位。

absolute是相对于自己最近的父元素来定位的，如果你不给#demo相对定位，那么#sub的绝对定位就是相对于body来定位的。

relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。

另：relative 不脱离文档流，absolute 脱离文档流。也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流。

写了个例子如下：

Html代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  6. <title>position</title>  
  7. <style type="text/css">  
  8.     <!--   
  9.     body{   
  10.         font-size:12px;   
  11.         margin:0 auto;   
  12.     }   
  13.   
  14.     div#demo{   
  15.         position:relative;   
  16.         border:1px solid #000;   
  17.         margin:50px;   
  18.         top:-50px;   
  19.         line-height:18px;   
  20.         overflow:hidden;   
  21.         clear:both;   
  22.         height:1%;   
  23.     }   
  24.   
  25.     div#sub{   
  26.         position:absolute;   
  27.         right:10px;   
  28.         top:10px;   
  29.     }   
  30.   
  31.     div.relative{   
  32.         position:relative;   
  33.         left:400px;   
  34.         top:-20px;   
  35.     }   
  36.   
  37.     div.static,div.fixed,div.absolute,div.relative{   
  38.         width:300px;       
  39.     }   
  40.   
  41.     div.static{   
  42.         background-color:#bbb;   
  43.         position:static;   
  44.     }   
  45.   
  46.     div.fixed{   
  47.         background-color:#ffc0cb;   
  48.     }   
  49.   
  50.     div.absolute{   
  51.         background-color:#b0c4de;   
  52.     }   
  53.   
  54.     div.relative{   
  55.         background-color:#ffe4e1;   
  56.     }   
  57.     -->  
  58. </style>  
  59. </head>  
  60. <body>  
  61.     <div id="demo">  
  62.         <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>  
  63.         <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>  
  64.         <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>  
  65.         <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>  
  66.     </div>  
  67. </body>  
  68. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>position</title>
<style type="text/css">
	<!--
	body{
		font-size:12px;
		margin:0 auto;
	}

	div#demo{
		position:relative;
		border:1px solid #000;
		margin:50px;
		top:-50px;
		line-height:18px;
		overflow:hidden;
		clear:both;
		height:1%;
	}

	div#sub{
		position:absolute;
		right:10px;
		top:10px;
	}

	div.relative{
		position:relative;
		left:400px;
		top:-20px;
	}

	div.static,div.fixed,div.absolute,div.relative{
		width:300px;	
	}

	div.static{
		background-color:#bbb;
		position:static;
	}

	div.fixed{
		background-color:#ffc0cb;
	}

	div.absolute{
		background-color:#b0c4de;
	}

	div.relative{
		background-color:#ffe4e1;
	}
	-->
</style>
</head>
<body>
	<div id="demo">
		<div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
		<div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
		<div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
		<div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
	</div>
</body>
</html>




提问者对于答案的评价：
感觉你的理解不错，谢谢。
也谢谢其他的JEer。

问题答案可能在这里 → 寻找更多解答

其他回答

我也是新手，给您点资料看看，不知道能不能帮上你

http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative

http://www.w3school.com.cn/css/css_positioning.asp
hcq989 (初级程序员) 2008-10-29
我的理解是这样子的。

如果你声明一个div的position：relative的话，就表示它的子内容如果 Position:absolute;的话，他的绝对位置就是相对他最近上一级声明了postion:relative的对象来绝对定位。否则的话就会使相对整个页面来绝对定位的。

声明relative就是说你如果要绝对定位就相对我来绝对定位吧。
reeze (初级程序员) 2008-10-30
引用
不过，对于声明了这属性的本身的元素的定位呢？它自身的top，left,right,bottom有什么作用？
你所讲的是relative的子元素的行为啊。我想知道它自身的一些信息。

应该是这样的，他自身的top，left。。。 将会从原来的位置偏移出去，偏移的位置就是相对于它自己原来在流里面的位置。但是其他的属性，比如margin不会随着偏移而偏移吧。。
reeze (初级程序员) 2008-10-30
看一下这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div + CSS Example, Wayhome's Blog</title>
<style type="text/css">
<!--
body,td,th{font-family:Verdana;font-size:9px;}
#apDiv1 {
position:absolute;
left:306px;
top:67px;
width:135px;
height:106px;
z-index:1;
background-color: #999999;
}
-->
</style></head>
<body>
<div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　right: 20px;<br />
　<div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;">
position: absolute;<br />
left: 20px;<br />
bottom: 10px;<br />
</div>
</div>
<div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;">
　position: absolute;<br />
　top: 5px;<br />
　left: 5px</div>
<div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;">
　position: relative;<br />
　left: 150px;<br />
　<br />
　width: 300px; height: 50px; <br />
</div>
<div style="text-align:center; background:#ccc;">
　　<div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;">
　 <p>1</p>
　 <p>2</p>
　 <p>3</p>
　 <p>4</p>
　 <p>5</p>
　 <div style="padding:20px 0 0 20px; background:#FFFF00;">
　　　 padding: 20px 0 0 20px;
　　<div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div>
　　<div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;">
　　　　position: <span style="color:blue;">relative</span>;<br />
　　 left: 200px;<br />
　　 <br />
　　 width: 300px;<br />
　　 height: 300px;<br />
　　 <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　　 top: 20px;<br />
　　　 right: 20px;<br /></div>
　　 <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;">
　　　 position: absolute;<br />
　　bottom: 20px;<br />
　　left: 20px;<br />
　　</div>
　　</div>
　 </div>
　
</div>
</div>
</body>
</html>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/13256.htm
hcq989 (初级程序员) 2008-10-31
我谈谈我的理解:
1.首先不要用层叠这个词，容易把关系搞混
2.absolute是受parentNode的position影响的
  parentNode的position不是relative,那absolute的绝对对象是针对body的
  parentNode的position  是relative,那absolute的绝对对象是针对parentNode的
  也就是说absolute的绝对是有参照Node的
3.对于复杂的position关系，要从parentNode的position的设置逐次的推下来
4.relative的node的尺寸会影响parentNode的尺寸,也就是说relative即定位也占位
  absolute的node的尺寸不影响parentNode的尺寸,也就是说absolute只定位不占位
5.z-index只对absolute的node有效
achun (高级程序员) 2008-11-02
relative是相对定位。这里的相对是指相对于此元素在正常情况下在文档中的位置，而且它并未被抽离文档流。未被抽离的意思是它还对后面的元素有影响，如果被抽离了，就不会对后面的元素有影响了。话多无用，亲自动手试试就理解了。对比一下相对定位前后的位置偏移量，及相对定位时与绝对定位时后面元素的变化。
落魄轻狂 (初级程序员) 2008-11-05
一下内容摘选于:http://www.blueidea.com/tech/web/2007/4601.asp 有时间自己去详细看看,详细你会明白的.
1．定位的专业解释
相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2．定位的形象解释
自私的相对定位（relative）
相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

实例强化对定位属性的理解
相对定位对象会占据它原来位置，在下面实例中，没有设定相对定位前，绿色小盒子是在蓝色盒子左上角的，之前也设定了绿色小盒子的浮动方式为左浮动，可以看到文本环绕在它右边，但是后来用相对定位方法把绿色小盒子重定位到外面去了，它还占着自己原来位置，因为你还可以看到文本流没有发生自动填补流动。因此这种直接的相对定位方法较少用，因为重定位对象后原来位置空了一块。相对定位常与绝对定位结合用，一般是给父级设定相对定位方式，子级元素就可以相对它进行方便的绝对定位了（请注意看后面的实例）。
Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位对象会占据原有位置</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #3CF;   
  17.  height: 200px;   
  18.  width: 200px;   
  19. }   
  20. .box2 {   
  21.  background-color: #6C6;   
  22.  height: 100px;   
  23.  width: 100px;   
  24.  position: relative;   
  25.  float: left;   
  26.  top:-120px;   
  27. }   
  28. -->  
  29. </style>  
  30. </head>  
  31.   
  32. <body>  
  33. <div class="box1">  
  34.   <div class="box2"></div>  
  35. [相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div>  
  36. </body>  
  37. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对定位对象会占据原有位置</title>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size: 9pt;
 line-height:12pt;
 margin-top: 150px;
 margin-left: 150px;
}
.box1 {
 background-color: #3CF;
 height: 200px;
 width: 200px;
}
.box2 {
 background-color: #6C6;
 height: 100px;
 width: 100px;
 position: relative;
 float: left;
 top:-120px;
}
-->
</style>
</head>

<body>
<div class="box1">
  <div class="box2"></div>
[相对定位对象会占据原有位置]现在绿色小盒子是以子盒子形式存在蓝色大盒子中，并设定了浮动方式为左浮动，所以这些文字能环绕在它右边，当绿色小盒子用相对定位方法重定位到外边去了，文字还是不能流入它的区域，即左上角空白区域，那是因为绿色盒子还占用着它原来位置。</div>
</body>
</html>


相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。
Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位对象不可层叠</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  height: 200px;   
  18.  width: 210px;   
  19.  padding:5px;   
  20. }   
  21. .box2 {   
  22.  background-color: #66CC66;   
  23.  height: 100px;   
  24.  width: 100px;   
  25.  position: relative;   
  26.  float: left;   
  27.  left:100px;   
  28. }   
  29. .box3 {   
  30.  background-color: #CC99FF;   
  31.  height: 100px;   
  32.  width: 100px;   
  33.  position: relative;   
  34.  float: left;   
  35.  right:100px;   
  36. }   
  37. -->  
  38. </style>  
  39. </head>  
  40.   
  41. <body>  
  42. <div class="box1">  
  43.   <div class="box2">我家在左边</div>  
  44.   <div class="box3">我家在右边</div>  
  45.   相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局， 如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。   
  46. </div>  
  47. </body>  
  48. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对定位对象不可层叠</title>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size: 9pt;
 line-height:12pt;
 margin-top: 150px;
 margin-left: 150px;
}
.box1 {
 background-color: #33CCFF;
 height: 200px;
 width: 210px;
 padding:5px;
}
.box2 {
 background-color: #66CC66;
 height: 100px;
 width: 100px;
 position: relative;
 float: left;
 left:100px;
}
.box3 {
 background-color: #CC99FF;
 height: 100px;
 width: 100px;
 position: relative;
 float: left;
 right:100px;
}
-->
</style>
</head>

<body>
<div class="box1">
  <div class="box2">我家在左边</div>
  <div class="box3">我家在右边</div>
  相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局， 如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。
</div>
</body>
</html>


给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。

Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>给包含块一个高度</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  width: 200px;   
  18.         height: 200px;/*如果不设定这个高度，也许显示的结果并不是你想要的*/   
  19.     
  20. }   
  21. .box2 {   
  22.  background-color: #CC99FF;   
  23.  height: 100px;   
  24.  width: 100px;   
  25.  position:relative;   
  26.  bottom:-100px;   
  27. }   
  28. -->  
  29. </style>  
  30. </head>  
  31.   
  32. <body>  
  33. <div class="box1">  
  34.   <div class="box2"></div>  
  35. </div>  
  36. </body>  
  37. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>给包含块一个高度</title>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size: 9pt;
 line-height:12pt;
 margin-top: 150px;
 margin-left: 150px;
}
.box1 {
 background-color: #33CCFF;
 width: 200px;
        height: 200px;/*如果不设定这个高度，也许显示的结果并不是你想要的*/
 
}
.box2 {
 background-color: #CC99FF;
 height: 100px;
 width: 100px;
 position:relative;
 bottom:-100px;
}
-->
</style>
</head>

<body>
<div class="box1">
  <div class="box2"></div>
</div>
</body>
</html>

放置相对定位对像到可视区外不会出现滚动条。此现象很好理解，因为相对定位对象原来位置没有变，原来位置没有出去滚动条就不会出现。在下面实例中，如果你缩小浏览器窗口，相对定位的对象还会出现完全消失的情况呢。
Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>放置相对定位对像到可视区外不会出现滚动条</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:13pt;   
  12. }   
  13. .box{   
  14.  background-color: #996699;   
  15.  height: 200px;   
  16.  width: 270px;   
  17.  background-image: url(http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg);   
  18.  background-repeat: no-repeat;   
  19.  background-position: center center;   
  20.  position: relative;   
  21.  left: 900px;   
  22. }   
  23. .box2{   
  24.  height: 200px;   
  25.  width: 270px;   
  26.  position:absolute;   
  27.  border: 1px dashed #996699;   
  28. }   
  29. -->  
  30. </style>  
  31. </head>  
  32.   
  33. <body>  
  34. <div class="box2">虚线框是右边盒子原来的位置，即用了相对定位后，把对象重新定位到了右边，但对象的位置其实还在这里，或者说对象实际上并没有越出浏览器可视区域，所以不会出现滚动条。<br />  
  35. 我说过相对定位的的盒子原有位置是不会被占用的，但我为什么可以在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才这样做的，请不要误解了。</div>  
  36. <div class="box"></div>  
  37. </body>  
  38. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>放置相对定位对像到可视区外不会出现滚动条</title>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size: 9pt;
 line-height:13pt;
}
.box{
 background-color: #996699;
 height: 200px;
 width: 270px;
 background-image: url(http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 position: relative;
 left: 900px;
}
.box2{
 height: 200px;
 width: 270px;
 position:absolute;
 border: 1px dashed #996699;
}
-->
</style>
</head>

<body>
<div class="box2">虚线框是右边盒子原来的位置，即用了相对定位后，把对象重新定位到了右边，但对象的位置其实还在这里，或者说对象实际上并没有越出浏览器可视区域，所以不会出现滚动条。<br />
我说过相对定位的的盒子原有位置是不会被占用的，但我为什么可以在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才这样做的，请不要误解了。</div>
<div class="box"></div>
</body>
</html>


定位的特殊值情况。如果定位设置是这样的：position:relative ，right:200px， left:10px会出现什么情况呢？一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，到底是听那边的呢，还是那个先，那个后呢。针对这种矛盾情况，CSS规定只听左边的left，而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。
Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>定位的特殊值情况</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body {   
  9.  margin:0px;   
  10.  font-size: 9pt;   
  11.  line-height:12pt;   
  12.  margin-top: 150px;   
  13.  margin-left: 150px;   
  14. }   
  15. .box1 {   
  16.  background-color: #33CCFF;   
  17.  width: 200px;   
  18.  height: 200px;   
  19. }   
  20. .box2 {   
  21.  background-color: #CC99FF;   
  22.  height: 100px;   
  23.  width: 100px;   
  24.  position:relative;   
  25.  right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/   
  26.  left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/   
  27.   
  28. }   
  29. -->  
  30. </style>  
  31. </head>  
  32.   
  33. <body>  
  34. <div class="box1">  
  35.   <div class="box2"></div>  
  36. </div>  
  37. </body>  
  38. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>定位的特殊值情况</title>
<style type="text/css">
<!--
body {
 margin:0px;
 font-size: 9pt;
 line-height:12pt;
 margin-top: 150px;
 margin-left: 150px;
}
.box1 {
 background-color: #33CCFF;
 width: 200px;
 height: 200px;
}
.box2 {
 background-color: #CC99FF;
 height: 100px;
 width: 100px;
 position:relative;
 right:200px;/*此值总被认为是-left=-10px,所以你怎么改它都不会影响到布局*/
 left:10px;/*这里设定了两个定位值，但是它们是矛盾的，所以此时将以左边为准，如果是上下类型错误，则以上边定位数值为准*/

}
-->
</style>
</head>

<body>
<div class="box1">
  <div class="box2"></div>
</div>
</body>
</html>


综合实例见证定位的魅力
Xml代码 复制代码 收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>相对定位和绝对定位实例--作者：唐国辉</title>  
  6. <style type="text/css">  
  7. <!--   
  8. *{   
  9.  margin:0px;   
  10.  padding:0px;   
  11. }   
  12. body {   
  13.  margin:10px;   
  14.  font-size: 13px;   
  15. }   
  16. a:link {   
  17.  color: #666;   
  18.  text-decoration: none;/*去除链接下划线*/   
  19. }   
  20. a:visited {   
  21.  color: #666;   
  22.  text-decoration: none;   
  23. }   
  24. a:hover {   
  25.  color: #F90;   
  26. }   
  27. h3 {   
  28.  color: #FFF;   
  29.  background-color: #F90;   
  30.  width: 100px;   
  31.  padding-top:3px;   
  32.  text-align:center;   
  33. }   
  34. ul {   
  35.  width: 300px;   
  36.  border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/   
  37. }   
  38. ul li {   
  39.  padding:5px;   
  40.  border-bottom: 1px solid #CCC;   
  41.  list-style:none;/*去除列表样式，这对于标准浏览很重要*/   
  42. }   
  43. a {   
  44.  position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/   
  45.  display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/   
  46. }   
  47. a div {   
  48.  display: none;/*初始化信息面板不显示*/   
  49. }   
  50. a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/   
  51. a:hover div {   
  52.  position: absolute;   
  53.  padding:5px;   
  54.  display:block;   
  55.  width: 245px;/*只给出宽度，高让它随内容多少自动调整*/   
  56.  left:150px;/*这是相对父级A的定位*/   
  57.  top: 20px;   
  58.  border: 1px solid rgb(91,185,233);   
  59.  background-color: rgb(228,246,255);   
  60.  z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/   
  61. }   
  62. a img {   
  63.  width:80px;   
  64.  height:80px;   
  65.  border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/   
  66.  display:block;   
  67.  position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/   
  68.  top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/   
  69.  left:5px;   
  70. }   
  71. dl {   
  72.  width: 160px;   
  73.  float:right;   
  74.  color: #999;   
  75.  line-height:20px;   
  76. }   
  77. dl dd span {   
  78.  font-weight: bold;   
  79.  color: #639;   
  80. }   
  81. -->  
  82. </style>  
  83. </head>  
  84.   
  85. <body>  
  86. <h3>最新单曲</h3>  
  87. <ul>  
  88.   
  89. <li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />  
  90. <dl>  
  91.  <dd><span>歌名:</span>爱的文身</dd>  
  92.  <dd><span>歌手:</span>黄圣依</dd>  
  93.  <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>  
  94. </dl></div></a></li>  
  95.   
  96. <li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />  
  97. <dl>  
  98.  <dd><span>歌名:</span>累了</dd>  
  99.  <dd><span>歌手:</span>阿信</dd>  
  100.  <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>  
  101. </dl></div></a></li>  
  102.   
  103. <li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />  
  104. <dl>  
  105.  <dd><span>歌名:</span>漫漫 慢慢</dd>  
  106.  <dd><span>歌手:</span>阿朵</dd>  
  107.  <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>  
  108. </dl></div></a></li>  
  109.   
  110. <li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />  
  111. <dl>  
  112.  <dd><span>歌名:</span>我怀念的</dd>  
  113.  <dd><span>歌手:</span>孙燕姿</dd>  
  114.  <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>  
  115. </dl></div></a></li>  
  116.   
  117. <li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />  
  118. <dl>  
  119.  <dd><span>歌名:</span>花期越来越近</dd>  
  120.  <dd><span>歌手:</span>后弦</dd>  
  121.  <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>  
  122. </dl></div></a></li>  
  123.   
  124. </ul>  
  125. </body>  
  126. </html>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对定位和绝对定位实例--作者：唐国辉</title>
<style type="text/css">
<!--
*{
 margin:0px;
 padding:0px;
}
body {
 margin:10px;
 font-size: 13px;
}
a:link {
 color: #666;
 text-decoration: none;/*去除链接下划线*/
}
a:visited {
 color: #666;
 text-decoration: none;
}
a:hover {
 color: #F90;
}
h3 {
 color: #FFF;
 background-color: #F90;
 width: 100px;
 padding-top:3px;
 text-align:center;
}
ul {
 width: 300px;
 border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/
}
ul li {
 padding:5px;
 border-bottom: 1px solid #CCC;
 list-style:none;/*去除列表样式，这对于标准浏览很重要*/
}
a {
 position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
 display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}
a div {
 display: none;/*初始化信息面板不显示*/
}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover div {
 position: absolute;
 padding:5px;
 display:block;
 width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
 left:150px;/*这是相对父级A的定位*/
 top: 20px;
 border: 1px solid rgb(91,185,233);
 background-color: rgb(228,246,255);
 z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
 width:80px;
 height:80px;
 border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
 display:block;
 position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
 top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
 left:5px;
}
dl {
 width: 160px;
 float:right;
 color: #999;
 line-height:20px;
}
dl dd span {
 font-weight: bold;
 color: #639;
}
-->
</style>
</head>

<body>
<h3>最新单曲</h3>
<ul>

<li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" alt="" />
<dl>
 <dd><span>歌名:</span>爱的文身</dd>
 <dd><span>歌手:</span>黄圣依</dd>
 <dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>
</dl></div></a></li>

<li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" alt="" />
<dl>
 <dd><span>歌名:</span>累了</dd>
 <dd><span>歌手:</span>阿信</dd>
 <dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>
</dl></div></a></li>

<li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" alt="" />
<dl>
 <dd><span>歌名:</span>漫漫 慢慢</dd>
 <dd><span>歌手:</span>阿朵</dd>
 <dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>
</dl></div></a></li>

<li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" alt="" />
<dl>
 <dd><span>歌名:</span>我怀念的</dd>
 <dd><span>歌手:</span>孙燕姿</dd>
 <dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>
</dl></div></a></li>

<li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" alt="" />
<dl>
 <dd><span>歌名:</span>花期越来越近</dd>
 <dd><span>歌手:</span>后弦</dd>
 <dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>
</dl></div></a></li>

</ul>
</body>
</html>
icess (初级程序员) 2008-11-05
从应用的角度来说，relative常用于包含有absolute元素的容器元素上。
absolute元素默认以body做为容器元素进行绝对定位。
如果你想在页面一个特定区域进行绝对定位，就可以在absolute元素外包裹一层容器元素应用relative样式。
jnoee (初级程序员) 2008-11-05
相对定位有两个作用：
1、在保证元素原始占位不变的情况下，偏移元素，这个有很多地方用得到，比如微调元素的位置，还有就是有种居中的实现方式就是利用了这一点；
2、作为子元素的定位父元素，也就是说，如果某个元素相对定位了，那其下的子孙元素，在没有其他定位元素隔离的情况下，将以这个父元素的包围框为基准做绝对定位。
笨笨狗 (初级程序员) 2008-11-05
Html代码 复制代码 收藏代码
  1. <html>  
  2. <head>  
  3. <title> position </title>  
  4. <style>  
  5. body { margin: 0px; padding: 0px; color: white; text-align: right; }   
  6. .box { width: 50px; border: dotted yellow; }   
  7. .square { width: 100px; height: 100px; }   
  8. .r { background-color: red; }   
  9. .g { background-color: green; }   
  10. .b { background-color: blue; }   
  11. #l { float: left; }   
  12. #r { float: right; }   
  13. #abs { position: absolute; top: 150px; left: 50px; }   
  14. #rel { position: relative; top: 150px; left: -50px; }   
  15. </style>  
  16. </head>  
  17.   
  18. <body>  
  19. <div class="box" id="l">  
  20.     <div class="r square" id="abs">R</div>  
  21.     <div class="g square"">G</div>  
  22.     <div class="b square">B</div>  
  23. </div>  
  24. <div class="box" id="r">  
  25.     <div class="r square" id="rel">R</div>  
  26.     <div class="g square">G</div>  
  27.     <div class="b square">B</div>  
  28. </div>  
  29. </body>  
  30. </html>   
<html>
<head>
<title> position </title>
<style>
body { margin: 0px; padding: 0px; color: white; text-align: right; }
.box { width: 50px; border: dotted yellow; }
.square { width: 100px; height: 100px; }
.r { background-color: red; }
.g { background-color: green; }
.b { background-color: blue; }
#l { float: left; }
#r { float: right; }
#abs { position: absolute; top: 150px; left: 50px; }
#rel { position: relative; top: 150px; left: -50px; }
</style>
</head>

<body>
<div class="box" id="l">
	<div class="r square" id="abs">R</div>
	<div class="g square"">G</div>
	<div class="b square">B</div>
</div>
<div class="box" id="r">
	<div class="r square" id="rel">R</div>
	<div class="g square">G</div>
	<div class="b square">B</div>
</div>
</body>
</html>


运行之

absolute 会把元素彻底移出文本流
relative 占座儿
quiii (初级程序员) 2008-11-05
position:relative; 他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位.
relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了，那么他原来的位置也就不存在了，
如果被定义成relative的对象被移出了 他原来的位置还在，别的元素就不能替代这个位置.
分享到：
| 块级元素和行内元素总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html+css定位练习

    总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...

    借助css定位实现动态关联的一个例子

    本话题主要关注如何利用CSS定位技术实现动态关联的效果，这对于网页设计和前端开发至关重要。下面将详细阐述CSS定位的基本概念、常见定位方式以及如何应用它们来创建动态关联效果。 首先，了解CSS定位的基本概念。...

    dreamweaver 【CSS样式规则对话框详解】& CSS定位详解之绝对定位和相对定位

    有了这个就可以搞定很多事情 在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦

    前端css定位.pdf

    总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...

    css定位绝对相对定位

    ### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    div+css 定位浅析

    本文将详细解析div+css定位的四种基本类型：static、relative、absolute和fixed，以及它们之间的差异。 1. **static**： - 这是元素的默认定位方式，元素会按照正常的文档流顺序排列，不考虑`top`, `bottom`, `...

    CSS定位.pdf

    CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...

    什么是css定位？css定位怎么使用.docx

    ### 什么是CSS定位？ CSS（层叠样式表）定位是一种用于控制HTML元素在网页上的位置的方法。通过CSS定位，开发者可以精确地控制元素相对于其原始位置、父元素或浏览器窗口的位置。CSS提供了多种定位方式，主要包括...

    css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜　

    4. CSS定位： 定位是CSS中的一项重要技术，用于控制元素在页面上的精确位置。主要有以下几种定位方式： - `static`：默认值，元素按常规流排列。 - `relative`：相对于其正常位置偏移。 - `absolute`：相对于...

    1.05 css定位布局

    CSS 定位布局详解 在 CSS 中，定位（position）是指元素在网页中的位置和布局方式。CSS 提供了多种定位方式，包括 static、relative、absolute、fixed 等。不同的定位方式将元素在网页中的位置和布局方式进行调整。...

    网页css定位,滤镜ppt课件+实例

    网页CSS定位和滤镜是构建动态、美观网页的关键技术，它们极大地丰富了网页的设计与交互体验。在这份资源中，包含的"CSS5_定位"和"CSS6_尺寸"两个PPT课件以及相关的实例网页，将帮助我们深入理解和应用这些概念。 ...

    CSS+Js定位与相对定位

    CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中，相对定位是基础，它允许元素相对于其原始位置进行偏移，但不会改变文档流。相对定位的CSS代码通常写作： ```css .element { position: ...

    有关CSS定位、隐藏的案例分享

    本篇文章将深入探讨两个关键概念：CSS定位和元素的隐藏与显示，通过具体的案例来阐述这些知识点。 一、CSS定位 定位是CSS中用于控制元素在页面上精确位置的重要技术。主要的定位机制有以下几种： 1. 静态定位...

    css定位的介绍大全.docx

    CSS（层叠样式表）是网页设计中用于控制布局和样式的语言，它的重要性在于能够实现灵活、响应式的设计。本文将深入探讨CSS中的四个关键...通过实践和深入学习，我们可以更好地掌握CSS定位，从而提升网页设计的质量。

    Dreamweaver CS6之Div+CSS定位.pdf

    在网页设计中，Div+CSS定位是构建高效、响应式布局的关键技术。Dreamweaver CS6作为一款强大的网页设计工具，提供了直观的界面来处理Div和CSS的定位问题。本文将详细探讨在Dreamweaver CS6中，如何利用Div和CSS的...

    Div CSS网站布局视频教程第10课_理解CSS定位与div布局

    本教程将深入讲解CSS定位与div布局，这是创建复杂网页结构的关键技能。在第10课中，我们将详细探讨以下知识点： 1. **CSS盒模型**：理解CSS盒模型是掌握布局的基础。每个HTML元素都是一个矩形的盒子，包括内容区域...

    div+css定位代码示例

    div+css定位代码示例 说明了绝对和相对

    css定位表格

    在本主题“CSS定位表格”中，我们将深入探讨如何使用CSS来创建和定位不同布局的表格，包括单行一列、两行一列、三行一列以及多列布局。这些布局通常基于浮动（float）和绝对定位（absolute positioning）方法。 1. ...

    css浮动和定位

    **二、CSS定位** 定位（Positioning）提供了更精细的控制，使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型： 1. **静态定位（static）**：这是元素的默认定位方式，遵循正常文档流。 2. **相对...

Magicbox
Global site tag (gtag.js) - Google Analytics