position 和z-index的使用

1.解決bootstrap datetimepicker 在bootstrap modal中不顯示問題

? ? ? ?通過在 input 輸入框之外嵌套,因為datatimepiker的默認(rèn)z-index是10,輸入框的z-index是9999,所以顯示不出來.經(jīng)這樣解決,datetimepicker的z-index變成了10009,自然在最上層,然后顯示出來.當(dāng)然z-index要想起作用,必須有position屬性值為absolute、relative或fixed.

2.解決按鈕懸浮在屏幕最下方的問題

關(guān)鍵就在于position和bottom的設(shè)置.

position:fixed; //設(shè)置此樣式可使得被設(shè)置的內(nèi)容不隨滾動條而滾動.

botttom:10px;? //設(shè)置此樣式使得其內(nèi)容距下方距離10個像素.


通過使用position 屬性,我們可以選擇 4 種不同類型的定位脐瑰,它們分別是:static惕橙、absolute楼咳、fixed以清、relative凸舵。

static:(靜態(tài)定位)是默認(rèn)值叠必,元素出現(xiàn)在正常的流中荚孵。不會受到top, bottom, left, right影響。

relative:相對定位元素的定位是相對自己原本的正常位置纬朝。依據(jù)left收叶,right,top共苛,bottom等屬性在正常文檔流中偏移位置判没。

可以移動的相對定位元素的內(nèi)容和相互重疊的元素,它原本所占的空間不會改變隅茎。

相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊澄峰。

Top的值表示對象相對原位置向下偏移的距離,bottom的值表示對象相對原位置向上偏移的距離辟犀,兩者同時存在時俏竞,只有Top起作用。

left的值表示對象相對原位置向右偏移的距離堂竟,right的值表示對象相對原位置向左偏移的距離魂毁,兩者同時存在時,只有l(wèi)eft起作用出嘹。

absolute:將對象從文檔流中拖出席楚,使用left,right税稼,top烦秩,bottom等屬性進(jìn)行絕對定位,而其層疊通過z-index屬性定義郎仆。此時對象不具有邊距只祠,但仍有補(bǔ)白和邊框。絕對定位的元素的位置相對于最近的已定位父元素丸升,如果元素沒有已定位的父元素铆农,那么它的位置相對于<html>。

Top的值表示對象上邊框與瀏覽器窗口頂部的距離,bottom的值表示對象下邊框與瀏覽器窗口底部的距離墩剖,兩者同時存在時猴凹,只有Top起作用;如果兩者都未指定岭皂,則其頂端將與原文檔流位置一致郊霎,即垂直保持位置不變。

left的值表示對象左邊框與瀏覽器窗口左邊的距離爷绘,right的值表示對象右邊框與瀏覽器窗口右邊的距離书劝,兩者同時存在時,只有l(wèi)eft起作用土至;如果兩者都未指定购对,則其左邊將與原文檔流位置一致,即水平保持位置不變陶因。

補(bǔ)充:

1. 設(shè)置absolute會使得inline元素被“塊”化骡苞,這在上一節(jié)將display時已經(jīng)說過;

2. 設(shè)置absolute會使得元素已有的float失效楷扬。不過float和absolute同時使用的情況不多解幽;

3. 上文提到了absolute會使元素懸浮在頁面之上,如果有多個懸浮元素烘苹,層級如何確定躲株?答案是“后來者居上”

fixed:其實(shí)fixed和absolute是一樣的,唯一的區(qū)別在于:absolute元素是根據(jù)最近的定位上下文確定位置镣衡,而fixed永遠(yuǎn)根據(jù)瀏覽器確定位置霜定。即使窗口是滾動的它也不會移動

1. Fixed定位使元素的位置與文檔流無關(guān),因此不占據(jù)空間捆探。

2. Fixed定位的元素和其他元素重疊然爆。

3. IE6不支持CSS中的position:fixed屬性。

【Z-index】垂直定位:Z軸方向上的層疊定位黍图。

?z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面奴烙。?

Z-index默認(rèn)值都為0助被,但默認(rèn)情況下,后來者會覆蓋前者切诀,此時揩环,如果需要改變層級關(guān)系,就要通過改變z-index值來實(shí)現(xiàn)幅虑。z-index越大優(yōu)先級越高丰滑。

如果將 position 設(shè)為 relative (相對定位),absolute (絕對定位) 或者 fixed (固定定位)倒庵,這樣的節(jié)點(diǎn)會覆蓋沒有設(shè)置 position 屬性或者屬性值為 static 的節(jié)點(diǎn)褒墨,說明前者比后者的默認(rèn)層級高炫刷。

例如彈出層時用到最多。

在Position屬性值為absolute的同時郁妈,如果有一級父對象(無論是父對象還是祖父對象浑玛,或者再高的輩分,一樣)的Position屬性值為Relative時噩咪,則上述的相對瀏覽器窗口定位將會變成相對父對象定位顾彰,這對精確定位是很有幫助的。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胃碾,一起剝皮案震驚了整個濱河市涨享,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌仆百,老刑警劉巖厕隧,帶你破解...
    沈念sama閱讀 221,198評論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異儒旬,居然都是意外死亡栏账,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評論 3 398
  • 文/潘曉璐 我一進(jìn)店門栈源,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挡爵,“玉大人,你說我怎么就攤上這事甚垦〔杈椋” “怎么了?”我有些...
    開封第一講書人閱讀 167,643評論 0 360
  • 文/不壞的土叔 我叫張陵艰亮,是天一觀的道長闭翩。 經(jīng)常有香客問我,道長迄埃,這世上最難降的妖魔是什么疗韵? 我笑而不...
    開封第一講書人閱讀 59,495評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮侄非,結(jié)果婚禮上蕉汪,老公的妹妹穿的比我還像新娘。我一直安慰自己逞怨,他們只是感情好者疤,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著叠赦,像睡著了一般驹马。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評論 1 308
  • 那天糯累,我揣著相機(jī)與錄音算利,去河邊找鬼。 笑死寇蚊,一個胖子當(dāng)著我的面吹牛笔时,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仗岸,決...
    沈念sama閱讀 40,743評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼允耿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了扒怖?” 一聲冷哼從身側(cè)響起较锡,我...
    開封第一講書人閱讀 39,659評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎盗痒,沒想到半個月后芭析,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氢惋,經(jīng)...
    沈念sama閱讀 46,200評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡桨昙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評論 3 340
  • 正文 我和宋清朗相戀三年扎拣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稽鞭。...
    茶點(diǎn)故事閱讀 40,424評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡鸟整,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出朦蕴,到底是詐尸還是另有隱情篮条,我是刑警寧澤,帶...
    沈念sama閱讀 36,107評論 5 349
  • 正文 年R本政府宣布吩抓,位于F島的核電站涉茧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏疹娶。R本人自食惡果不足惜伴栓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雨饺。 院中可真熱鬧挣饥,春花似錦、人聲如沸沛膳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锹安。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叹哭,已是汗流浹背忍宋。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留风罩,地道東北人糠排。 一個月前我還...
    沈念sama閱讀 48,798評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像超升,于是被迫代替她去往敵國和親入宦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案室琢? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,756評論 1 92
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流盈滴,浮動涯肩,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,746評論 0 15
  • CSS的position總是屬性很容易讓人弄混~ 為了仔細(xì)區(qū)別它們,所以今天總結(jié)一下CSS的position屬性~...
    fehysunny閱讀 2,928評論 0 7
  • 當(dāng)在這一個頁面上實(shí)現(xiàn)布局和定位有幾種不同的技術(shù)巢钓。使用哪種技術(shù)病苗,很大程序上取決于內(nèi)容和目標(biāo)頁面,因為有很多技術(shù)比別人...
    lulu_c閱讀 1,067評論 0 5
  • 鬧鐘定在早上六點(diǎn)症汹,六點(diǎn)響到七點(diǎn)硫朦,已經(jīng)伸了n個懶腰NG,重新再伸烈菌,阵幸,,拖著還在睡夢中沉重的身軀起來了芽世,帶著一肚子起床...
    蜜罐m閱讀 175評論 0 0