【笔记】学习CSS布局07——position

最新推荐文章于 2024-11-03 11:09:26 发布

二木成林

最新推荐文章于 2024-11-03 11:09:26 发布

阅读量210

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/cnds123321/article/details/84593675

版权

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

为了制作更多复杂的布局，我们需要讨论下 position 属性。它有一大堆的值，名字还都特抽象，别提有多难记了。让我们先一个个的过一遍，不过你最好还是把这页放到书签里。

static

.static {
  position: static;
}

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

relative 表现的和 static 一样，除非你添加了一些额外的属性。

在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

我相信你已经注意到页面右下角的固定定位元素。你现在可以仔细看看它，这里有它所使用的CSS：

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。

令人惊讶地是移动浏览器对 fixed 的支持很差。这里有相应的解决方案.

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。

这里有一个简单的例子：

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

div class="relative">这个元素是相对定位的。如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

这个元素是绝对定位的。它相对于它的父元素定位。

这部分比较难理解，但它是创造优秀布局所必需的知识。

代码实例：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.static {
			position:static;
			background-color:#65ca5c;
		}
		.relative1 {
			position:relative;
			background-color: #65ca5c;
		}
		.relative2 {
			position:relative;
			top:-20px;
			left:20px;
			width:500px;
			background-color: #65ca5c;
		}
		.fixed {
			position:fixed;
			bottom:0;
			right:0;
			width:400px;
			background-color: #65ca5c;
		}
		.absolute {
			position:absolute;
			top:600px;
			right:0;
			width:300px;
			height:200px;
			background-color: #65ca5c;
		}
	</style>
</head>
<body>
	<div class="static">
		<h1>static</h1>
		static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
	</div>
	<br />
	<br />
	<div class="relative1">
		<h1>relative</h1>
		relative 表现的和 static 一样，除非你添加了一些额外的属性。
	</div>
	<br />
	<br />
	<div class="relative2">
		在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
	</div>
	<br />
	<br />
	<div class="fixed">
		<h1>fixed</h1>
		一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
	</div>
	<br />
	<br />
	<div class="absolute">
		<h1>absolute</h1>
		absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
	</div>
</body>
</html>

效果图如下：