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