DIV position属性

最新推荐文章于 2022-07-05 10:00:11 发布

whyabc

最新推荐文章于 2022-07-05 10:00:11 发布

阅读量9.1k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/yanzhibo/article/details/18569479

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

DIV定位，position属性

absolute ：绝对定位

位置相对离元素最近父级文档流的左上角，会脱离文档流，飘起来。

配合top、right、bottom、left使用。

有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个容器，那就使用浏览器初始的，也就是body（文档流）或者html元素。标准是说只需要指定left和right，width可以自动根据容器宽度计算出来

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>DIV+CSS</title>
		
		<style type="text/css">
			div{
				width:300px;
				height:300px;
			}
			.div1{
				background:#ccc;
				position:absolute;
				left:30px;
				top:50px;
				/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
			}
			.div2{
				background:red;
			}
		</style>
	</head>
	<body>
		<div class="div1">这是div1,当设置position为absolute时，div1会飘起来。相对于最近父级文档流。</div>
		<div class="div2">这是div2，当div1飘起来时，div2会移动到div1的位置。</div>
	</body>
</html>

relative ：相对定位
位置相对于自己的当前位置，不会脱离文档流，
不会飘起来。
配合top、right、bottom、left使用。

如：设置top为10px，div会移动到距离自己当前top位置10px的位置。

relative 就是相对元素static（正常默认）定位时的位置进行偏移，如果指定static时top是50象素，

那么指定relative并指定top是10象素时，元素实际top就是60象素了。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>DIV+CSS</title>
		
		<style type="text/css">
			div{
				width:300px;
				height:300px;
			}
			.div1{
				background:#ccc;
				position:relative;
				left:30px;
				top:50px;
				/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
			}
			.div2{
				background:red;
			}
		</style>
	</head>
	<body>
		<div class="div1">这是div1,当设置position为relative时，div1会相对于自己默认的位置进行移动。</div>
		<div class="div2">这是div2，当div1移动时，div2不会移动到div1的位置。</div>
	</body>
</html>

fixed ：固定定位，fixed才是真正的绝对定位。

位置相对于浏览器。

配合top、right、bottom、left使用。

其位置永远相对浏览器位置来计算。而且就算用户滚动页面，元素位置也能相对浏览器保持不变，

也就是说永远可以看到，这个做一些彩单的时候可以用。

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>DIV+CSS</title>
		
		<style type="text/css">
			
			.div1{
				background:#ccc;
				position:fixed;
				bottom:10px;
				right:100px;
				/*z-index:-1;*//*设置为-1时，div1就会在div2的下面。*/
			}
		</style>
	</head>
	<body>
		<div class="div1"><a href="#">回到顶部></a></div>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
		<p>测试position属性fixed。</p>
	</body>
</html>

static：静态定位

就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定。

relative,absolute,fixed需要指定具体位置
relative,absolute,fixed如果不指定它的top,left等属性，

那么它的position实际上依然是static。

使用了relative,absolute,fixed就必须指定具体的位置。

部分内容摘自：http://javapub.iteye.com/blog/733471

whyabc

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
DIV position属性

DIV定位，position属性absolute ：绝对定位位置相对于文档流的左上角，会脱离文档流，飘起来。配合top、right、bottom、left使用。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其position是absolute或fixed或relative。如果没有这个
复制链接

扫一扫