定位综合运用
Position
实验题目
定位设计
实验目的
了解文档流的特点
掌握相对定位 relative、绝对定位 absolute 的基本应用
掌握固定定位 fixed 的基本应用
掌握粘性定位 sticky 的基本应用
熟悉层级 z-index 在定位中的作用
培养综合运用 relative、absolute、fixed 和 sticky 开发和设计的能力
实验内容
在个人网站的基础上开发并完善，实现以下内容：
购物车：商品数量定位在购物车右上角
头像设计：为伪元素指定背景模拟边框
返回顶部：使用超链接，固定在页面右下角，单击时返回顶部
吸顶导航：页面滚动到一定距离时，主导航吸附到顶部
侧边导航*：导航栏固定在页面的版心左侧
下拉菜单*：分别使用显示与不显示和高度从0到一定数值变换两种方式实现
参考效果和参考代码
购物车
头像设计
侧边导航、返回顶部
吸顶导航
拓展与思考
定位时参考对象的选择
如何理解最近的定位元素？
如何理解最近的带滚动条的定位元素？