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時噩咪,則上述的相對瀏覽器窗口定位將會變成相對父對象定位顾彰,這對精確定位是很有幫助的。