一.定位
1.Position
position 属性指定了元素的定位类型。
元素可以使用的顶部，底部，左侧和右侧属性定位。但是，必须是先设定position属性。
position参考值：
- static：默认值，没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。
- fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口滚动它也不会移动。
- relative ：相对定位元素的定位是相对其正常位置，它原本所占的空间不会改变。
- absolute ：相对于最近的已定位父元素，若没有，则它的位置相对于html。
- sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
语法举例：
h1
{
position:fixed; /*先设定position属性*/
top:10px; /*对上下左右进行设置*/
right:20px;
}
2.元素的重叠
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
优先级：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
用法：
- 必须有定位。（除去static之外）
- 给定 z-index 的值为层级的值。（不给默认为0）
- 层级不取小数。
- 层级为0的盒子，也比标准流和浮动高；层级为负数的盒子，比标准流和浮动低。
- 而层级的高低，与占位无关。
语法举例：
img
{
positon:absolute;
top:0px;
left:0px;
z-index:-1;
}
3.overflow
overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
参考值：
- visible：默认值。内容不会被修剪，会呈现在元素框之外。
- hidden：内容会被修剪，并且其余内容是不可见的。
- scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
语法举例：
div
{
width:200px;
height:100px;
overflow:auto;
}
实例：
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
position:absolute;
top:230px;
left:40px;
}
div
{
width:200px;
height:100px;
overflow:auto;
}
img
{
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
</style>
<meta charset = "utf-8"/>
<title>定位</title>
</head>
<body>
<img src="露西亚.jpg" height = "400px">
<h1>铁板</h1>
<div>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
<p>你们又要迫害我了对吧</p>
</div>
</body>
</html>
结果：
二.浮动
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
语法举例：
.photo
{
float:left;
width:100px;
height:100px;
margin:5px;
}
如果你不想要元素周围出现浮动元素，使用clear(参考值：left,right,both,none)
.text
{
clear:both;
width:100px;
height:100px;
margin:5px;
}
三.对齐
1.元素居中对齐
要水平居中对齐一个元素, 可以使用 margin: auto，且设置到元素的宽度将防止它溢出到容器的边缘。
.center {
margin: auto;
width: 50%; /*必须设置宽度*/
padding: 10px;
}
2.文本水平对齐
使用 text-align: center
p
{
text-align:center;
}
3.图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:
img
{
display:block;
margin:auto;
}
其他对齐的方式，如左对齐，右对齐等等，很简单，使用position：absolute或float修改就可以了。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:auto;
padding:10px;
width:50%;
border:2px solid green;
}
p
{
text-align:center;
}
img
{
display:block;
margin:auto;
}
</style>
<meta charset = "utf-8"/>
<title>对齐</title>
</head>
<body>
<div>
<p>你们又要迫害我了对吧</p>
<img src = "露西亚.jpg" height = "400px">
</div>
</body>
</html>
结果：
