1. 程式人生 > >關於利用position定位在頁面正中心的問題(還有一個z-index的知識點)

關於利用position定位在頁面正中心的問題(還有一個z-index的知識點)

扯點沒有用的:

今天做專案的時候,突然發現了一個問題:position定位還沒有完全掌握。

為什麼這麼說呢?因為今天我想把一個登入框不依靠js居中於整個頁面,我沒有任何思路。

切入正題:

關於position定位,有個很重要的點:定位定的只是一個框框的左上角 當我們用了position:absolute之後,這個框框就具備的絕對定位的能力。 如果我們用了left:50% top:50%後,其實這個框框的左上角的點已經在螢幕的正中心了。但是此時,也僅僅是左上角的點在螢幕的正中心。而我們要的是框框在正中心。這該怎麼做到呢? 其實思路很簡單: ①我們先看一下這個框框的寬和高,如果沒有的話就自己設定一個。
②向左移動這個框框的半個寬的長度 ③向上移動這個框框的半個高的長度 你會發現:此時,框框正中心的點已經在了頁面的正中心。也就是框框處在了頁面的正中心位置。 下面附圖一張:
------------------------------------------------------------------分割線-----------------------------------------------------------

控制堆疊順序的屬性:z-index

在使用z-index屬性之前,一定要注意:z-index只能使用在 定位元素 上使用,即position:absolute;
z軸定義為垂直延伸到顯示區的軸。如果為正數,則離使用者更近,為負數,則離使用者更遠。

相關推薦

no