Day05-定位

一. 本节课学习目标。

1. 掌握定位的作用。
2. 掌握定位的实现方式。
3. 掌握相对定位，绝对定位，固定定位的区别。
4. 能够通过html，css，盒模型，浮动，定位进行复杂网页布局。
   二. 定位。
5. 作用。
   解决是具有层叠（覆盖）效果的布局。
6. 实现方式。
   对元素的样式设置：position: relative | absolute | fixed
7. 不同的定位方式。
   定位位置调整都是配合left, top, right, bottom四个属性来使用的。
   7.1 相对定位。
   添加方式： 给元素添加 position: relative
   该元素相对于自身所在的位置进行定位。
   定位的元素想要改变位置，需要通过：top、left、right、bottom属性使用。
   特性：可以提升元素的层级，但是没有脱离文档流，越晚定位的元素层级越高。
   7.2 绝对定位。
   添加方式： 给元素添加 position: absolute
   该元素相对于已经定位的父元素定位。
   解释：
   父元素：该元素的上层元素都叫父元素（上级，上上级，上上上级）
   已经定位：已经添加过 position: relative
   特性：可以提升元素的层级，会脱离文档流。
   7.3 固定定位。
   添加方式： 给元素添加 position: fixed
   该元素相对于窗口定位。
   特性：可以提升层级，会脱离文档流。
   代码:
   三. 定位练习1-韩都衣舍。
   效果图：
   代码如下:
   四. 定位练习2-小米。
   效果图：
   实现代码：