本节简介:固定定位,相对定位和绝对定位的对比及代码编写方式等。
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
用margin属性将元素移动本身元素长或宽的一半~
元素的定位(让元素居中显示):left:50%; top:50%;margin-top:-150px;margin-left:-200px
想要将元素变为在右下角,添加代码:Position:fixed;right:0 bottom:0
position:fixed固定定位;特性:根据浏览器窗口位置进行偏移(left、right、top、bottom),原有位置不存在。position:relative相对定位;特性:根据自己原有的位置进行偏移(left、right、top、bottom),原有位置依然存在。 position:absolute绝对定位;特性:根据父级位置进行偏移(left、right、top、bottom),父级必须要有定位属性,原有位置不存在。z-index:1(2、3等)决定层级的哪个在上面
position:absolute 特性 根据父级位置进行偏移 父级必须有自己的定位属性(原位置不存在)否则子级会找有定位属性的父级而离开原本的父级,
position:relative的 left(向右) top(向下) right(向左) bottom(向上)的值 都是 相对于原始位置像各方向偏移
position:relative 特性:根据自己原有的位置进行偏移 原有位置仍然存在 它会随网页滚动条的滚动而滚动
position: fixed 特性:根据浏览器窗口位置进行偏移。原有位置不存在<br>position:fixed的 left(向右) top(向下) right(向左) bottom(向上)的值 都是 相对于浏览器窗口的位置向各方向偏移
对联广告制作:让position:fixed;left:0;top:50%; 接着用margin-top 减去整个高度的一般就可以了(高度用负数才能向上移动)
position:fixed 相对于窗口固定定位(可以用来做广告位) 后面的值 可以跟 left right top bottom
绝对定位position:absolute 加了绝对定位后,原位置也会消失
position:relative相对于自身进行定位(相对定位)
定位需要基于positon:fixed的前提下才起作用
中心定位方法:top50%, left50%, margin-top:-1/2px; margin-left:-1/2px;
绝对定位,以父级为基准,前提是要给父级加相对定位 position:relative属性.若父级未加,有绝对定位属性的子极会以浏览器为准