本节简介:固定定位,相对定位和绝对定位的对比及代码编写方式等。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
position:fixed(固定定位原有的位置不在了)relative(相对定位,相对自己定位)absolute(绝对定位,根据父级位置进行定位)left值和top值是基于定位属性的。没有定位属性就会失效。
position:absolute 原有位置不存在,父级必须要有定位属性
相对定位:position:relative 原有位置依旧存在
如果父集没有变化的,用相对定位,有变化的,用绝对定位
z-index:1;默认为0 , 代表定位层级,数值越大,位置越上面
z-index:1;默认为0 , 代表定位层级,数值越大,位置越上面
position:absolute;绝对定位,需要父级是relative定位,原有位置不存在,
position:relative;相对定位,相对原有位置移动,原有位置依然存在
position:fixed;固定定位,原有位置不存在
position:fixed; left:50%; top:50%; margin-top:-div高度的一半; margin-left:-div宽度的一半; 就可以使div固定在屏幕中间
position:fixed是固定; top:100px意思是距离顶部100px; right:0意思是贴着右侧;