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軸定義為垂直延伸到顯示區的軸。如果為正數,則離使用者更近,為負數,則離使用者更遠。

相關推薦

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

扯點沒有用的: 今天做專案的時候,突然發現了一個問題:position定位還沒有完全掌握。 為什麼這麼說呢?因為今天我想把一個登入框不依靠js居中於整個頁面,我沒有任何思路。 切入正題: 關於posi

css 定位屬性position的使用方法實例-----一個層疊窗口

gray 白色 osi style 邊距 需要 屬性 back 分享 運行結果: <!DOCTYPE html> <html> <head> <title>重疊樣式窗口</title> <style

零基礎學python-3.7 還有一個程序 python讀寫文本

efi == put ret mode nbsp inpu exce for each 今天我們引入另外一個程序,文件的讀寫 我們先把簡單的程序代碼貼上。然後通過我們多次的改進。希望最後可以變成一個簡單的文本編輯器 以下是我們最簡單的代碼: ‘crudfile--讀寫文

利用絕對定位實現垂直居中

子div bottom absolute cnblogs lac class pan abs 原理 <div style="width: 200px;height: 200px;background: gray;position: relative">

筆記-返回到前一個頁面時顯示前一個頁面中ajax獲取的數據

最終 logs ajax請求 嘗試 但是 repl 拼接 新聞 筆記 筆記第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的問題是,用ajax獲取了一系列列表信息後,拼接好html後插入到了原有頁面中

CSS中position定位

fix rip ble 偏移 正常 abs css class z-index 定義和用法 position 屬性規定元素的定位類型。 說明 這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位,不過絕對或固定元素會生成一個塊級框,而不論該元素本身是什麽類型。相對定位

好吧,我承認我是愛瞎折騰----利用YDUI改變頁面UI

彌補 小時 技術分享 dash 利用 時間 執行力 bsp 同學 上周恒豐代付接口上線投產後,我做了一個“恒豐代付檢查工具”,用途是,當線上調用恒豐代付出現了問題訂單時,可以在這個工具頁裏做相應的彌補。 我項目裏其他一些工具頁的UI用的是YDUI。

Day 48(08/03)float屬性 position(定位)

absolut 變化 pos tle 滾動條 tool toolbar 例如 另一個 float屬性 基本浮動規則 先來了解一下block元素和inline元素在文檔流中的排列方式。   block元素通常被現實為獨立的一塊,獨占一行,多個block元素會各自新起一行,默認

ACCESS通過一個連接寫入的數據,還有一個連接卻讀取不出來

type acc 而是 dcl 讀取 ret class 保存 rip 近期在用c#實現一個數據導入的功能,將一個ACCESS數據庫中的數據導入到還有一個ACCESS的數據庫中,然後顯示出來,可是導入成功了。卻顯示不出來。 經過研究認為應該是緩存的原因

position定位

定位 otto 默認值 聲明 ati ria left 屏幕 媒體 Position屬性:static、relative、absolute、fixed position:static 無定位 該屬性值是所有元素定位的默認情況,在一般情況下,我們不需要特別的去聲明它,但

關於CSS 的position定位問題

如果 meta add com 技術分享 fix height 比較 導航 對於初學者來說,css的position定位問題是比較常見的。之前搞不清楚postion定位是怎麽回事,排版一直歪歪斜斜的,老是排不好 css的定位一般來說,分為四種: position:sta

React漫漫學習路之 利用Create React App命令創建一個React應用

app.js service gitignore r.js 學習 start pac 應用 javascrip 所謂萬事開頭難,本文旨在為初探React的同學,建立第一個最基本的react應用。 Create React App是Facebook官方的一個快速構建新的 Re

CSS 如何通過top left 定位控制div在另一個div的位置

src 技術 charset .com utf erb 效果 width left 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"

iOS 【UIKit-UIPageControl利用delegate定位圓點位置 之 四舍五入小技巧】

優化 距離 scroll current control 水平 技術 觸發 src 在UIScrollView中會加入UIPageControl作為頁碼標識,能夠讓用戶清楚的知道當前的頁數。我們須要優化的一點是讓pageControl

python 利用爬蟲獲取頁面上下拉框裏的所有國家

span googl lec ram chrome color 模塊 獲取 ica 前段時間,領導說列一下某頁面上的所有國家信息,話說這個國家下拉框裏的國家有兩三百個,是第三方模塊導入的,手動從頁面拷貝,不切實際,於是想著用爬蟲去獲取這個國家信息,並保存到文件裏。 下面是具

利用Chrome的Heap Snapshot功能分析一個時間段內的內存占用率

-i 獲取 logs post ges summary ima 下拉菜單 allocated 在下圖測試代碼第13行和第16行設斷點. 以調試方式運行,首先斷點在第13行處觸發: 打開Chrome開發者工具,點擊Profiles tab, 再點擊按鈕"Take Snaps

關於在一個頁面裏控制另一個頁面的問題

tint mov remove flag int log get var rem 1 cookie&定時器 btn.onclick = function(){ setCookie(‘need_refresh‘, ‘yes‘);}setInterval(func

13.position定位小結

splay 支持 ID -h 擴展 css屬性 表現 邊框 效果 一、position定位 (一):position的屬性   1.absolute:生成絕對定位的元素,相對於最近一級定位不是static的父元素來進行定位;   2.relative:生成相對定位的元素,相

還需要註冊的是我們還有一個是“交差集”?cross?join,?這種Join沒有辦法用文式圖表示,因為其就是把表A和表B的數據進行一個N*M的組合,即笛卡爾積。表達式如下:

笛卡爾 tab 表達 但是 rom 產生 OS 是我 語法 還需要註冊的是我們還有一個是"交差集" cross join, 這種Join沒有辦法用文式圖表示,因為其就是把表A和表B的數據進行一個N*M的組合,即笛卡爾積。表達式如下: SELEC

定位頁面元素的位置

clas 元素 body nbsp 定位 標題 style AS 放置 <html><head><style type="text/css">h2.pos_abs{position:absolute;left:100px;top:150p