什么时候需要用position：relative和position：absolute这2个属性
发布网友
发布时间：2022-05-14 02:54
共2个回答
热心网友
时间：2022-05-14 04:23
相对还是绝对
css中有个定位属性position其中有两个值分别是relative和absolute，即相对或者绝对，
通常在拿到一个页面的设计在进行结构化之前，即是写一份完整而可用的纯html文档，是不是会发现有很多奇怪的需求呢？一个icon或图片要飘在某个区域的一个角落，显然它已经偏移了这个区域的内容范围，或者一个居右的更多或者回到页首，那么你是如何规划自己的html文档结构的呢？
回到标题，相对还是绝对，position的属性为我们解决这样的问题提供了很大的方便，解释下着两个属性，顾名思义可以理解，而其中有另外一个逻辑是，绝对的上一个节点如果是相对，那么该绝对节点会以相对的节点为参照物，如果不是，则以窗体body为参照物。
举个例子
HTML:
1. <div id=”wrapper”>I’m wrapper!<div id=”content”>right,top</div></div>
复制代码
CSS:
1. #wrapper {
2. position:relative;
3. width:400px;
4. height:300px;
5. background:#ccc;
6. }
7. #content{
8. position:absolute;
9. top:-25px;
10. right:-25px;
11. width:50px;
12. height:50px;
13. background:#999;
14. }
复制代码
看看会是什么效果的？ (代码没测试，不行告诉我，应该行)
至于具体的应用就看大家的想象力了
还有一些教程：
利用position absolute及relative图文混排 http://log.7thpark.com/article/W3C-and-Front-End-Development/image-text-align-left-in-css.html
类似表格排版的使用方法 http://log.7thpark.com/article/W3C-and-Front-End-Development/how-to-use-css-position-for-layout-090221.html
参考资料：http://log.7thpark.com/article/W3C-and-Front-End-Development/css-position-relative-or-absolute.html
热心网友
时间：2022-05-14 05:41
relative:相对的,相对上一个网页元素的坐标
absolute:绝对的,以整个网页做为坐标系,指定网页的元素位置.
用个html自己试一下:
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
