本节简介:固定定位,相对定位和绝对定位的对比及代码编写方式等。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
绝对定位:position:absolute 根据父级位置进行偏移,父级必须有定位 原有位置不存在
相对定位:position:relative 根据自己位置偏移 ,原有位置依然存在
让图形固定在正中心位置 例:position:fixed; left:50% top:50% margin-top:-(图形高度一半) margin-left:-(图形宽度一半)
固定定位 position:fixed 根据浏览器窗口进行偏移 ,原有位置不在
absolute 不停地寻找父级,所以,父级宜定relative
三种定位布局方式: (固定定位)position:fixed ;;; (相对定位)position:relative ;;; (绝对定位)position:absolute ....
fixed:居中对齐:top:50%,margin-top:高度得一半; left:50%,margin-left:宽度得一半
子级要绝对定位的时候,父级的position属性用relative
absolute定位找父级,如果父级没定义定位,则再找上一级的父级,如果没有再想上找,如果都没有就以浏览器窗口定位
相对定位 position:relative 固定定位position:fixed 绝对定位position:absolute
相对定位 position:relative 固定定位position:fixed 绝对定位position:absolute
absolute定位是针对父级元素的定位,设置不同元素的等级,只要添加“index”属性
相对定位:根据自己原有的位置进行偏移,原有位置依然存在
进行位置定位时,“top”和“left”发挥作用是基于定位属性的(position:fixed)