W3School-CSS 定位 (Positioning) 实例

CSS 定位 (Positioning) 实例

CSS 实例

• CSS 背景实例
• CSS 文本实例
• CSS 字体(font)实例
• CSS 边框(border)实例
• CSS 外边距 (margin) 实例
• CSS 内边距 (padding) 实例
• CSS 列表实例
• CSS 表格实例
• 轮廓（Outline)实例
• CSS 尺寸 (Dimension) 实例
• CSS 分类 (Classification) 实例
• CSS 定位 (Positioning) 实例
• CSS 伪类 (Pseudo-classes)实例
• CSS 伪元素 (Pseudo-elements)实例

---

01设置元素的形状

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>01设置元素的形状</title>
		<style type="text/css">
			img {
				position:absolute;
				clip: rect(0px 100px 300px 0px);
			}
		</style>
	</head>

	<body>
		<img src="cc.jpg" width="510px" height="730px" />
	</body>

</html>

---

02如何使用滚动条来显示元素内溢出的内容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>02如何使用滚动条来显示元素内溢出的内容</title>
		<style type="text/css">
			div {
				width: 250px;
				height: 80px;
				background-color: #cc9966;
				overflow: scroll;
			}
		</style>
	</head>

	<body>
		<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

		<div>
			这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
		</div>
	</body>

</html>

---

03如何隐藏溢出元素中溢出的内容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>03如何隐藏溢出元素中溢出的内容</title>
		<style type="text/css">
			div {
				width: 250px;
				height: 80px;
				background-color: #cc9966;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

		<div>
			这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
		</div>
	</body>

</html>

---

04如何设置浏览器来自动地处理溢出

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>04如何设置浏览器来自动地处理溢出</title>
		<style type="text/css">
			div {
				width: 250px;
				height: 80px;
				background-color: #cc9966;
				overflow: auto;
			}
		</style>
	</head>

	<body>
		<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

		<div>
			这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
		</div>
	</body>

</html>

---

05垂直排列图象

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>05垂直排列图象</title>
		<style type="text/css">
			img.top {
				vertical-align: text-top;
			}

			img.bottom {
				vertical-align: text-bottom;
			}
		</style>
	</head>

	<body>
		<p>
			这是一副<img class="top" border="1" src="55.jpg" />位于段落中的图像。
		</p>
		<p>
			这是一副<img class="bottom" border="1" src="55.jpg" />位于段落中的图像。
		</p>
	</body>

</html>

---

06Z-index

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>06Z-index</title>
		<style type="text/css">
			img.x {
				position: absolute;
				top: 30px;
				left: 0px;
				z-index: -1;
			}

			img.y {
				position: absolute;
				top: 150px;
				left: 50px;
				z-index: 1;
			}
		</style>
	</head>

	<body>
		<h1>这是一标题</h1>
		<img class="x" src="55.jpg" />
		<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
		<h1>这是二标题</h1>
		<img class="y" src="55.jpg" />
		<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
	</body>
	</body>

</html>

---

07使用固定值设置图像的上右下左边缘

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>07使用固定值设置图像的上右下左边缘</title>
		<style type="text/css">
			img.top {
				position: absolute;
				top: 0px;
			}

			img.right {
				position: absolute;
				right: 0px;
			}

			img.bottom {
				position: absolute;
				bottom: 0px;
			}

			img.left {
				position: absolute;
				left: 100px;
			}
		</style>
	</head>

	<body>
	    <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
		<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
	</body>

</html>

---

08使用百分比设置图像的上右下左边缘

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>08使用百分比设置图像的上右下左边缘</title>
		<style type="text/css">
			img.top {
				position: absolute;
				top: 5%;
			}

			img.right {
				position: absolute;
				right: 5%;
			}

			img.bottom {
				position: absolute;
				bottom: 5%;
			}

			img.left {
				position: absolute;
				left: 20%;
			}
		</style>
	</head>

	<body>
		<h1>这是标题</h1>
		<img class="top" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="right" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="bottom" border="1" src="77.jpg" width="150px" height="100px" />
		<img class="left" border="1" src="77.jpg" width="150px" height="100px" />
	</body>

</html>

---

CSS 定位 (Positioning)总结