css的position:relative和position:absolute一直搞不明白，很头晕

山水无言 2011-01-10 01:00:58
在网上找了很多关于css的position:relative和position:absolute的帖子，很头晕，一直搞不明白。

绝对定位：一个采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位----看不明白

相对定位：采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间----看不明白


这个例子（绝对定位）能在页面上显示


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>CSS定位原理</title>



<style type="text/css">

#box1 {

 position:absolute;

 top: 50px;

 left: 50px;

 border:1px solid green

}



#box2 {

 position:absolute;

 top: 50px;

 right: 50px;

 border:1px solid green

}



#box3 {

 position:absolute;

 bottom: 50px;

 right: 50px;

 border:1px solid green

}



#box4 {

 position:absolute;

 bottom: 50px;

 left: 50px;

 border:1px solid green

}

</style>



</head>



<body>

<div id="box1">box1</div>

<div id="box2">box2</div>

<div id="box3">box3</div>

<div id="box4">box4</div>

</div> 

</body>

</html>


这个例子（相对定位）在页面上看不到结果：


<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>CSS定位原理</title>



<style type="text/css">

#dog1 {

 position:relative;

 left: 350px;

 bottom: 150px;

 border:1px solid green

}

#dog2 {

 position:relative;

 left: 150px;

 bottom: 500px;

 border:1px solid green

}



#dog3 {

 position:relative;

 left: 50px;

 bottom: 700px;

 width:900px;

 height:600px;

 border:1px solid green

}

</style>



</head>



<body>

<div id="dog1">dog1</div>

<div id="dog2">dog2</div>

<div id="dog3">dog3</div>

</div> 

</body>

</html>
...全文
384 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
山水无言 2011-01-15
  • 打赏
  • 举报
 回复
谢谢各位，最近很忙，没空上网和试验，我会好好感谢大家的。
各位是不是将一个网页的所有div都套在一个大的div中？
001007009 2011-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 rao3324180 的回复:]
楼主看看我做的说明吧.累死了..
如果看了这个还不理解的话.就没办法了


HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.……
[/Quote]
不错，学习了
yolandaxie 2011-01-13
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 rao3324180 的回复:]

楼主看看我做的说明吧.累死了..
如果看了这个还不理解的话.就没办法了

HTML code
<!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……
[/Quote]


解释的非常清楚到位，很好很好
KeepMoving 2011-01-12
  • 打赏
  • 举报
 回复
这个东西，写个例子应该能看出来效果的，你多想想……
linshenxiu 2011-01-12
  • 打赏
  • 举报
 回复
给元素加上了position:absolute，元素就脱离了文档流，就不按从上到下的顺序显示了。这时元素是相对整个页面的左上角定位的。
position:relative是相对临近的元素定位的，没有脱离文档流。
rao3324180 2011-01-12
  • 打赏
  • 举报
 回复
楼主看看我做的说明吧.累死了..
如果看了这个还不理解的话.就没办法了

<!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>

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

<title>positon方法说明</title>

<style type="text/css">

.relative{

		width:300px;

		height:100px;

		background:yellow;

		position:relative;

		margin:55px auto;



}

.box{

		width:200px;

		height:95px;

		background:blue;

		position:absolute;

		top:0;

		left:0;

		color:#fff;

		font-size:12px;

}

.box2{width:200px;height:50px;background:orange;position:absolute;top:0;left:0;}

</style>

</head>

<body>



     <div class="relative">

				<div class="box">

						.relative是"我"的依靠.如果.relative块没有设置position:relative;"我"会一直往上寻找有position:relative;的依靠.如果一直没有目标."我"会以浏览器的左上方依靠.

				</div>

				

	 </div>

<div class="box2">

"我"一直没有找到依靠.所以"我"会停靠在浏览器的左上方.

</div>

<div>

<p>.relative的块是父级</p>

<p>.box是子级.</p>

<p>当给.relative设置position:relative;的时候,.box块就会以.relative块的左上方为基准,<span style="color:red">(在给了.box块的position:absolute;top:0;left:0;的前提下哦)</span></p>

</div>

<p style="color:orange;font-weight:bold">特别注意.当一个内联元素:比如"span标签",给了position定位后.会在不转display:block;的情况下拥有块的属性.</p>







	



</body>

</html>
86y 2011-01-12
  • 打赏
  • 举报
 回复
应该搞懂了吧！其实就是做的时候才能发现问题！
wllllll 2011-01-11
  • 打赏
  • 举报
 回复
- - 我只知道会出现什么结果..使用N年了才知道有个"文档流"名词.

仲兴轩 2011-01-11
  • 打赏
  • 举报
 回复
感觉这两个属性理解重要，

更重要的是在应用这两个属性的时候引起的某些IE下的BUG更重要，

我就在这些上老出问题，哎 ，找原因都找半天，郁闷呀
KK3K2005 2011-01-11
  • 打赏
  • 举报
 回复
relative主要是用来定义一个绝对定位的父层次 这样可以让该层次内的子单位（position:absolute）用作定位依据

当不设置left，top的时候 这个层（relative）将保持和占据原来文档流中的位置
这个是有意义的
因为你很可能只用他来作为一个定位依据 但不强制他的位置

所以 relative实际上涵盖了 position 和 【指定相对位置】 2个属性
【指定相对位置】被省略了
wwtbless 2011-01-11
  • 打赏
  • 举报
 回复
这两个东东还是好理解，用起来也容易。楼上说的也比较全面了。正好刚才就写了个例子


<style type="text/css">

 body{padding:10px;margin:0;}

.index-box{width:49%;height:200px;float:left;border:1px solid #666;}

.header {height:18px;position:relative;z-index:1;overflow:hidden}

.header .left{width:8px;background:#ccc;position:absolute;left:0px;}

.header .right{width:8px;background:#ccc;position:absolute;right:0px;z-index:99;top:0px}

.header .mid{width:100%;background:#33FFFF}

.main-body{width:100%;height:180px;background:#FC0;clear:both;}

</style>

</head>



<body>

<div class="index-box">

    <div class="header">

        <div class="left">1</div>

        <div class="mid">boxHeaher</div>

        <div class="right">2</div>

    </div>

    <div class="main-body">boxBody</div>

    </div>

</div>

</body>
孟子E章 2011-01-10
  • 打赏
  • 举报
 回复
打个比喻：
absolute就像一个气球，漂在了水面之上的空气中，不会占据水中的位置，（脱离文档流）
relative就像一个气球，有一半浮在水中，占据水的位置（不脱离文档流）
屮艸芔茻2014 2011-01-10
  • 打赏
  • 举报
 回复
position:relative对于文档是相对而言在一个位置，position:absolute是相对relative而言在文档中某个位置。
Acesidonu 2011-01-10
  • 打赏
  • 举报
 回复
不脱离文档流就是在原来的位置还有那个元素大小的位置占据着，就像灵魂出窍一样，本体还在那里，只是显示的位置变了。
山水无言 2011-01-10
  • 打赏
  • 举报
 回复
relative 不脱离文档流，absolute 脱离文档流。
也就是说：relative 的元素尽管表面上看到它偏离了原来的位置，但它实际上在文档流中还是没变。absolute的元素不仅位置改变了，同时也脱离了文档流

不脱离文档流和脱离文档流到底是什么意思
----无法理解，请求高手指点，谢谢！！！

yixianggao 2011-01-10
  • 打赏
  • 举报
 回复
当使用 position:relative; 时必须同时指定 top 和 left 样式属性！

L@_@K
<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>CSS定位原理</title>



<style type="text/css">

#dog1 {

 position:relative;

 left: 350px;

 top: 150px;

 border:1px solid green

}

#dog2 {

 position:relative;

 left: 150px;

 top: 500px;

 border:1px solid green

}



#dog3 {

 position:relative;

 left: 50px;

 top: 700px;

 width:900px;

 height:600px;

 border:1px solid green

}

</style>



</head>



<body>

<div>

    <div id="dog1">dog1</div>

    <div id="dog2">dog2</div>

    <div id="dog3">dog3</div>

</div>

</body>

</html>
山水无言 2011-01-10
  • 打赏
  • 举报
 回复
另外，<div>套<div>的定位更是头晕，哪位能解释并举例？
如：
<div id="a1">
<div id="a1_1">
<div id="a1_1_1"></div>
<div id="a1_1_2"></div>
</div>
<div id="a1_2"></div>
<div id="a1_2_1"></div>
<div id="a1_2_2"></div>
</div>
CSS样式相对定位position: relative；和绝对定位position: absolute；的详细解读
CSS样式相对定位position:relative；和绝对定位position:absolute；的详细解读
CSS中position:relative与position:absolute的区别；用通俗易懂的语言解释
就像把一个元素放在网页上的一个具体坐标位置，就好像你在屏幕上放一个小纸条一样。这个位置是相对于网页上的某个容器（通常是父元素）而言的，而不是相对于其他元素。所以，"position: absolute" 是绝对定位，而 "position: relative" 是相对定位，它们用于控制元素在网页上的位置。也是在元素原来的位置上微调，但不会影响其他元素。就好像你有一叠纸，然后你在其中一张纸上移动一小段距离，但其他纸仍然保持原来的位置。
CSS中的position:relative理解
今晚来说说CSS中的position属性，其实在实际开发页面过程中，记录一下这个让我迷茫的relative，我将它分为三种情况进行说明 包含关系：父级absolute，子级relative； 包含关系：父级relative，子级absolute； 并列关系：兄弟标签都是relative； 1.最具常见的用法就是父级标签relative，子级标签position来做到无论浏览器如何改变，都是相对...
区分position:relative； position:absolute； position:fixed
区分position:relative; position:absolute; position:fixed 对于position:relative; position:absolute; position:fixed，很多小伙伴分不清他们具体是针对哪里移动的，下面我给大家讲讲我个人理解。 position:absolute;（绝对定位） position:rabsolute; 他的意思是绝对定位，他是参照父级的原始点为原始点，无父级则以body的原始点为原始点，配合TRBL进行定位，当父级内有pa
css之“深入理解position:absolute和position:relative的区别”
<!--四、position:absolute和position:relative的区别--> <!--1.脱离文档流的区别,就是不会显示新的一行--> <!--定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在--> <!--定位为absolute的层脱离正常文本流，但位置不在存在--> <!--2.相对的元素不一样--> <!--relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式--.
CSS

61,126

社区成员

60,706

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章