5.19
相对位置、绝对位置、固定位置
<!--
课本P175
CSS中3种基本的布局机制：标准流、浮动、定位
position属性值为relative(相对定位)、absolute(绝对位置)、fixed(固定位置)
相对绝对通常成对出现
-->
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>相对定位(relative)、绝对定位(absolute)</title><style type="text/css" >.parent{/* 800*400,边框10像素红色，水平居中*/margin: 100px auto;width: 800px;height: 400px;border: 10px solid red;position: relative;}.son1{/*400*200,蓝色背景*/width: 400px;height: 200px;background-color: #AFEEEE;position: absolute;/*向右移动0px*/left: 0px; /*right:400px*//*向下移动0px*/top: 0px; /*bottom:200px*/}.son2{/*400*200,粉色背景*/width: 400px;height: 200px;background-color: pink;position: absolute;/*向右移动400px*/left: 400px; /*right:0px*//*向下移动0px*/top: 0px; /*bottom:400px*/}.son3{/*400*200,红色背景*/width: 400px;height: 200px;background-color: lightcoral;position: absolute;/*向右移动0px*/left: 0px; /*right:400px*//*向下移动200px*/top:200px; /*bottom:0px*/}.son4{/*400*200,紫色背景*/width: 400px;height: 200px;background-color: plum;position: absolute;/*向右移动400px*/left: 400px; /*right:0*//*向下移动200px*/top: 200px; /*bottom:0*/}</style></head><body><div class="parent"><div class="son1"></div><div class="son2"></div><div class="son3"></div><div class="son4"></div></div></body>
</html><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>固定定位(fixed)＋锚记</title><style type="text/css">.main{height: 3000px;/*padding: 1500px 0;*/}.img{position: fixed;right: 0;bottom: 0;}</style></head><body><!--网页高度3屏--><div class="main"><h1 id="top">我是顶部</h1><!--点击图片，返回顶部--><div class="img"><a href="#top"><img src="img/向上.png"></a></div></div></body>
</html>