本節簡介:固定定位,相對定位和絕對定位的對比及代碼編寫方式等。
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
用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屬性.若父級未加,有絕對定位屬性的子極會以瀏覽器為準