本节简介:本节课主要给大家介绍固定定位、相对定位、绝对定位的三种定位布局方式的特征与应用。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
层级关系 后面的会覆盖前面的 想要一个始终在前可设z-index 1value
绝对定位absolute 根据父级位置进行偏移,父级必须要有定位属性,原有位置不存在(运用较多)
相对定位relative 根据自己原有位置进行偏移,原有位置存在
固定定位fixed 根据浏览器窗口位置进行偏移,原有位置不存在
三种定位方式:固定定位 相对定位 绝对定位 布局下position(位置)
父级 相对定位 配 子级元素绝对定位,这样,子级元素之间互补**
绝对定位 总框内的元素互不影响,因为,它们本身的位置已经不存在了
position fixed relative absolut
子级用绝对定位,后面的定位,覆盖前面的定位;更改层级关系,z-index:1,值越大层级越高;
fixed,浏览器位置偏移,激活字体加粗,位置不存在(移动了位置) top:50%; margin-top:-150px;上移宽度的一半;;relative,在自己原有位置,根据值移动(值要在可视范围内),相对定位原位置存在;;绝对定位absolute,根据父级位置偏移,父级必须要有定位属性relative,子级用绝对定位,原有位置不存在;