一、定位
position：属性可以定义元素的定位类型。
对应的可以有五个值：static（静态）、relative（相对）、fixed（固定）、absolute（绝对）
sticky（粘性）。
1、static（静态）定位：
HTML元素的默认值，即没有定位，静态定位不会受到top，bottom，left，right影响。
div.static{
position:static;
border:3px solid #00ff00;
}
2、fixed（固定）定位：
元素的位置相对于浏览器窗口是固定位置。
窗口滚动它不会移动：
p.fixed{
position:fixed;
top:30px;
right:5px;
}
3、relative（相对）定位
相对其正常位置的定位：
h2.left{
position:relative;
left:-20px; <!--相对于正常位置向左移动20px-->
}
h2.right{
position:relative;
left:20px <!--相对于正常位置向右移动20px-->
}
4、absolute（绝对）定位：
绝对定位是相对于最近的已定位父元素，如果没有已定位的父元素，那么它的位置相当于<html>:
h2{
position:absolute;
left:100px;
top:150px;
}
5、sticky（粘性）定位：
与页面滚动情况相关，当不出现超出屏幕情况时，则是相对定位，范围后则为固定定位。
div.sticky{
position:sticky;
top:0
background-color:green;
border:2px solid red;
}
6、重叠的元素
当两个元素发生重叠后，可以使用z-index设置纵向覆盖情况
img{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
二、溢出（overflow）
当一个元素的内容超出元素框时，可以使用overflow属性，来定义如发生溢出情况的显示方式：
visible：默认值，内容不裁剪，呈现在元素框外
hidden：内容被裁剪，溢出内容不可见
scroll：内容被裁剪，游览器给出滚动条来查看移除内容
div{
width:200px;
height:50px;
background-color:#eee;
overflow:scroll;
}
三、浮动（float）
元素向左或向右移动，其周围的元素也会重新排列，主要应用于图像或布局。
div{
float:right;
}
另元素相邻：把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
.float{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮动（clear）
.clear{
clear:both;
}
四、对齐
元素居中对齐：要水平居中对齐一个元素（如<div>）,可以使用margin:auto
.center{
margin:auto;
width:50%;
border:3px solid green;
padding:10px;
}
文本居中对齐：
.center{
text-align:center;
border:3px solid green;
}
元素左右对齐（absolute）：
.right{
position:absolute;
right:0px;
width:300px;
border:3px solid #73AD21;
padding:10px;
}
元素对齐的第二种方式（float）
.right{
float:right;
width:300px;
border:3px solid #73AD21;
padding:10px;
}
垂直居中对齐（padding）：
.center{
padding:70px 0;
border:3px solid green;
}
举例效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta char="UTF-8">
<title>小莫初学</title>
<link rel="stylesheet" type="text/css" href="实验.css">
</head>
<body>
<div class="static">静态定位演示</div>
<div class="fixed">固定定位演示</div>
<div class="relative1">相对定位演示1</div>
<div class="relative2">相对定位演示2</div>
<div class="absolute">绝对定位演示</div>
<div class="sticky">粘性定位演示</div><br>
<div class="overflow">溢出演示溢出演示溢出演示溢出演示溢出演示溢出演示
溢出演示溢出演示溢出演示溢出演示溢出演示</div>
<div class="float">浮动内容1</div>
<div class="float">浮动内容2</div>
<div class="float">浮动内容3</div>
<div class="center">元素居中对齐</div>
</body>
</html>
.static{
position:static;
border:1px solid green;
}
.fixed{
position:fixed;
border:2px solid blue;
top:50px;
right:30px;
}
.relative1{
position:relative;
left:-20px;
}
.relative2{
position:relative;
left:20px;
}
.absolute{
position:absolute;
top:100px;
left:100px;
}
.sticky{
position:sticky;
top:0px;
border:3px solid yellow;
}
.overflow{
width:300px;
height:50px;
background-color:red;
overflow:scroll;
}
.float{
float:right;
clear:both;
}
.center{
margin:auto;
width:60%;
border:3px solid green;
}