CSS 定位属性（Positioning）
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。
| 属性 | 说明 | 说明 |
|---|---|---|
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移 | auto，length， %，inherit |
| clip | 剪辑一个绝对定位的元素 | shape，auto，inherit |
| cursor | 显示光标移动到指定的类型 | url，auto，crosshair，default，pointer，move，e-resize，ne-resize，nw-resize，n-resize，se-resize，sw-resize，s-resize，w-resize，text，wait，help |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移 | auto， length， %，inherit |
| overflow | 设置当元素的内容溢出其区域时发生的事情 | auto，hidden，scroll，visible，inherit |
| position | 指定元素的定位类型 | absolute，fixed，relative，static，inherit |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移 | auto，length，%，inherit |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移 | auto，length，%，inherit |
| z-index | 设置元素的堆叠顺序 | number，auto，inherit |
Static 定位
HTML元素的默认值，静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于浏览器窗口是固定位置, 不会随着窗口的滚动来移动。
Relative 定位
相对定位的位置是相对其正常位置的定位，相对定位元素移动后，其本来所占的空间不会改变。
Absolute 定位
绝对定位的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。
绝对定位是元素的位置和文档流无关，原来的空间会发生改变。
重叠元素的处理
- 使用z-index属性指定了一个元素的堆叠顺序。
- 具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
- 如果两个定位元素重叠，但是没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。
CSS 浮动（float）属性
- CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
- 浮动会使元素向左或向右移动，其周围的元素也会重新排列。
- 浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。
| 属性 | 描述 | 值 |
|---|---|---|
| clear | 指定不允许元素周围有浮动元素 | left，right，both，none，inherit |
| float | 指定一个盒子（元素）是否可以浮动 | left，right，none，inherit |
清除浮动 - clear
- 使用clear属性可以解决元素浮动之后，周围元素会重新排列的问题。
- clear 属性指定元素两侧不能出现浮动元素。
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<p>
在下面的段落中,图像将向右浮动。黑色虚线边界添加到图像。
我们还添加了边缘的0 px的顶部和右侧 margin,15 px底部margin,和20 px左侧的margin的图像。使得文本远离图片:</p>
<p>
<img src="/attachments/cover/cover_css.png" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
