定位
css布局：盒模型、浮动、定位 、这些都是最重要的布局属性。
辅助功能属性：a、文本、背景等等，为了让页面更加美观。
定位：相对定位、绝对定位、固定定位。
概念：元素位置相对于某一参考物进行的位置的偏移。
脱标：浮动、绝对定位、固定定位。
1、相对定位
相对定位：元素相对于自身进行的位置偏移。
position：定位属性。
属性值：relative，相对的。
偏移的数据量：方向属性控制，top、right、bottom、left。
代码↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
.box{
background-color: skyblue;
position: relative;
left: 100px;
top: 110px;
}
</style>
</head>
<body>
<div>1</div>
<div class="box">2</div>
<div>3</div>
<div>4</div>
</body>
</html>
未添加相对定位前效果图↓
添加相对定位后效果图↓
有一个相对定位属性↓
position: relative;left: 100px; top: 110px;
元素偏移方向与属性方向是相反的(属性值为正)，我写的属性left100px 其实就是元素向右偏移，top110是以为我加了个10px的下边距。
方向判断：如果属性值为正，偏移方向与属性方向相反↓
right: 100px; 向左偏移100px left: 100px; 向右偏移100px top: 100px; 向下偏移100px bottom: 100px; 向上偏移100px
如果属性值为负值，偏移方向与属性方向相同↓
right: -100px; 向右偏移100px left: -100px; 向左偏移100px top: -100px; 向上偏移100px bottom: -100px; 向下偏移100px
水平和垂直方向可以选择任何一个方向属性进行搭配。
特点：显示的位置是偏移后的位置，原位置保留，没有被其他元素给占有，类似灵魂出窍，肉体在原位，灵魂脱离。
相对定位不会让元素脱离标准流，标准流的位置还是他自己的。
用途不是很多，但是也有自己的特殊用途：
①结构比较稳定，常拿来做绝对定位的参考元素，子绝父相。
②微调↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
font-size: 18px;
}
div span{
font-size: 12px;
position: relative;
bottom: 8px;
}
</style>
</head>
<body>
<div>相对定位微调<span>[1]</span>哈哈哈哈哈哈
</div>
</body>
</html>
效果图↓
可以看到“后面的文字”依然在[1]后面排列，常见于百度百科。
微调练习案例
... ... ...