北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案腥降禱,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗善憤,歡迎免費體驗淨算乖。

全面剖析CSS Position定位

一佰互聯網站制作(www.yinxi.net) 發布日期 2019-04-21 17:24:56 瀏覽數: 25

本文為大家解析了CSS Position定位另,供大家參考刻瓖釀,具體內容如下

       當人們剛接觸布局的時候都比較傾向于使用定位的方式彎材。因為定位的概念看起來好像比較容易掌握模噴疚。表面上你確切地指定了一個塊元素所處的位置那麼它就會坐落于那里瓢傾縷。可是定位比你剛看到的時候要稍微復雜一點陝臼。對于定位來說歐括娥,有一些東西會絆倒新手芹咕,所以在它成為你的慣用技巧前你需要掌握它們棲按班。

  一旦你更深入地了解了它是怎麼運作的巾,你就能夠做出一些更棒的事情來濺死。

  CSS盒模型和定位的類型

  為了搞清楚定位首先你得了解CSS盒模型尖酥。在上一句中的鏈接是我寫在InstantShift 中的一篇關于盒模型的文章咀。我在那篇文章做了詳細的講解並會在這篇文章中做一個快速的總結鉑捂。

  在CSS中烹贛廄,每一個元素都由一個矩形盒子所包含槍伴。每一個盒子都會具有一個內容區貌吻稅,內容區被一個內邊距所包裹誹唯伍,內邊距外是盒子的邊框哇壟鵑,並且在邊框之外會有一個外邊距用于與其他盒子分隔開來短嗡建。這些你可以從下面這張圖片看到瘸。

  定位模式規定了一個盒子在總體的布局上應該處于什麼位置以及對周圍的盒子會有什麼影響壁。定位模式包括了常規文檔流希,浮動跑瓷稈,和幾種類型的 position 定位的元素驕。

  CSS position 屬性可以取5種值茶時︰

CSS Code復制內容到剪貼板
  1. positionabsolute  
  2. positionrelative  
  3. positionfixed  
  4. positionstatic  
  5. position: inherit   
  6.   

  我會在下面對前三個值進行詳細的闡述並簡單地講解一下最後兩個值瘸瘓從。

pk10 她挑戰網絡新經濟;“您的案子太復雜了1  static 是 position 默認的屬性值騁竊。任何應用了 position:static 的元素都處于常規文檔流中沽賒。它處于什麼位置以及它如何影響周邊的元素都是由盒模型所決定的吞。

  一個 static 定位的元素會忽略所有 top覆,right餞,bottom螺秸,left 以及 z-index 屬性所聲明的值苫省。為了讓你的元素能使用任何的這些屬性惹,你需要先為它的 position 屬性應用這三個值的其中之一鯨︰ absolute復居褐,relative拼盯,fixed

  position 值為 inherit 的元素和其他所有屬性的繼承值一樣節,元素只是簡單地應用了與父元素一樣的 position 值囊頂胸。

  絕對定位(Absolute Positioning)

  絕對定位的元素會完全地從常規文檔流中脫離恰。對于包圍它的元素而言興,它會將該絕對定位元素視為不存在氛。就好像 display 屬性被設為 none 一樣盡。如果你想要保持它所佔有的位置而不被其他元素所填充撫,那麼你需要使用其他的定位方式觀沉。

  你可以通過 top, right, bottom, 和 left 四個屬性來設置絕對定位元素的位置渴滇幾。但你通常只會設置它們其中的兩個魯,top 或者 bottom冪份,以及 left 或者 right入列。默認地它們的值都為 auto庫。

  弄明白絕對定位的關鍵是知道它的起點在哪里尸說。如果 top 被設置為20px那麼你要知道這20px是從哪里開始計算的鐮董玫。

  一個絕對定位的元素的起點位置是相對于它的第一個 position 值不為 static 的父元素而言的巳桿橙。如果在它的父元素鏈上沒有滿足條件的父元素寵角舊,那麼絕對定位元素則會相對于文檔窗口來進行定位耐騰。哈!

  關于“相對”這個概念你或許有點迷惑嘎額,尤其是還有一個叫相對定位的東西隻,這是我們還沒有講到的舍。

  當你在一個元素的樣式上設置 position:absolute 意味著需要考慮父元素率嘯究,並且如果父元素的 position 值不為 static 紉,那麼絕對定位元素的起點為父元素的左上角位置捶撬脖。

  如果父元素沒有應用除了 static 以外的 position 定位撇,那麼它會檢查父元素的父元素是否有應用非 static 定位顧卷烹。如果該元素應用了定位乒天,那麼它的左上角便會成為絕對元素的起點位置篡備睡。如果沒有則會繼續向上遍歷DOM直到找到一個定位元素或者尋找失敗以到達最外層的瀏覽器窗口普。

  相對定位(Relative Positioning)

  相對定位的元素也是根據 top, right, bottom, 和 left 四個屬性來決定自己的位置的棉。但只是相對于它們原來所處于的位置進行移動呸然。在某種意義上來說汗蔥,為元素設置相對定位和為元素添加 margin 有點相似蓖痘井,但也有一個重要的區別缸虎。區別就是在圍繞在相對定位元素附近的元素會忽略相對定位元素的移動尉稻。

  我們可以把它看做是一張圖片的重像從真實的圖片的位置開始進行了一點移動具。它原始圖片所佔據的位置仍然保留秒朔,但我們已經沒法再看到它獻灣結,只能看到它的重像崗矯。這樣就讓元素之間可以進行位置的重疊囊踞韭,因為相對定位元素能夠移動到其他元素所pk10 月初余額拜年。佔據的空間中腺梅懼。

  相對定位元素離開了正常文檔流甦慰酮,但仍然影響著圍繞著它的元素舷筆下。那些元素表現地就好像這個相對定位元素仍然在正常文檔流當中畝萄俱。

  我們無需再追問這個相對的位置是在哪里脾奴。因為這個相對位置很顯然是正常的文檔流蔫層濤。相對定位有點兒像為元素添加了 margin 雀兌攤,對相鄰元素來說卻像是什麼都沒發生過輝即。但實際上並沒有增加任何的 margin 敘賦遷。

  固定定位(Fixed Positioning)

  固定定位的行為類似于絕對定位滴,但也有一些不同的地方次片。

  首先局,固定定位總是相對于瀏覽器窗口來進行定位的漿坊汗,並且通過哪些屬性的 top, right, bottom, 和 left 屬性來決定其位置呢矯。它拋棄了它的父元素透,它就是定位中表現地有點兒反叛襪善。

  第二個不同點是其在名字上是繼承的徹匈必。固定定位的元素是固定的謙滄鈴。它們並不pk10 朝風餐,夕露宿。“唔……嗯1隨著頁面的滾動而移動攫敖絡。你可以告訴元素它所處的位置並永遠不再移動捐毆煥。噢~好像還挺乖巧的賞虹。

  在某種意義上說固定定位元素有點兒類似固定的背景圖片視萌,只不過它的外層容器塊總是瀏覽器窗口罷了吩亨蒜。如果你在 body 中設置一個背景圖片那麼它與一個固定定位的元素的行為時pk10开奖 懼怕失敗;﹪“礙…百,百……”非常像的嗆,只不過在位置上的精度會略少一些蓖。

  背景圖片也不能改變其在第三個維度的大興疾 恕,也因而帶來了 z-index 屬性角覆。

  打破了平面的 Z-Index

  這個頁面是一個二維平面楓矯肖。它具有寬度和高度襯奴。我們活在一個用 z-index 作為其深度的三維的世界當中椽冉。這個額外的維度能夠穿越一個平面眷糞什。

 

  由上圖可知孩,高的 z-index 位于低的 z-index 的上面並朝頁面的上方運動思慌。相反地橙,一個低的 z-index 在高的 z-index 的下面並朝頁面下方運動筷樂。

  沒有的 z-index 的話架儡娥,定位元素會有點兒麻煩吳。因為 z-index 能讓一個定位元素位于另一個元素的上方或者下方穢,這或許能讓你做出點創造性的東西伶浩場。所有的元素的默認的 z-index 值都為0粕,並且我們可以對 z-index 使用負值敖。

  z-index 實際上比我在這里描述的要更加地復雜盒哼滬,但細節寫在了另一篇文章里據灌謀。現在只需要記住這個額外維度的基本概念以及它的堆疊順序甘,另外還要記住只有定位元素才能應用 z-index屬性省極爸。

  定位的問題

  對于定位元素來說由幾個比較常見的問題淑殘,都值得我們好好了解孿。

  1.你不能在同一個屬性當中應用定位屬性和浮動鬼。因為對使用什麼樣的定位方案來說兩者的指令時相沖突的睫釋窖。如果你把兩個屬性都添加到一個相同的元素上摔,那麼就期望在CSS中較後的那個屬性時你想要使用的吧椿。

  2.Margin 不會在絕對元素上折疊壤澈。假設你具有一個 margin-bottom 為20px的段落扔擂罕。在段落後面是一個具有30px的 margin-top 的圖片孺。那麼段落和圖片之間的空間不會是50px(20px+30px)而是30px(30px > 20px)目陳。這就是所謂的 margin-collapse博探蔫,兩個 margin 會合並(折疊)成一個 margin魯伐樸。

  絕對定位元素不會像那樣進行 margin 的折疊糠。這會使它們跟預期的不一樣結躺貌。

  3.IE在 Z-index 上有一些BUG禱。在IE 6中 select 元素總是處于堆疊層級的最上方而不管它的 z-index 和其他元素的 z-index 是多少多夢庭。

  IE 6和IE 7在堆疊層級上又有另外一個問題漢換。IE 6由最外層的定位元素的層級來決定哪一組的元素處于層級的最上面底,而不是每一個單獨的元素自身的層級決定呵。

CSS Code復制內容到剪貼板
  1. <div style="z-index: ">   
  2.    <p style="z-index: 1"></p>   
  3. </div>   
  4. <img style="z-index: " />  

  對上面這段結構蜜刑露,你會預料段落元素處于堆疊層級的最上方斜吮。因為它具有最大的 z-index 值成枷。但在IE 6和IE 7中無鼓,圖片為處于段落的上方腺奔。因為 img 具有比 div 更加高的 z-index 層級工庫。因此它會位于所有 div 的子元素的上方盤。

  總結

  一個元素上所設置的位置屬性會根據其中的一種CSS定位模式來運作狙凍瘋。你可以為定位元素設置 absolute, relative, fixed, static (默認), 和 inherit 中的其中一個值呢。

  定位模式和CSS定位元素暖魔礎,定義了一個盒子在布局中應該處于什麼位置以及圍繞它的元素會受到定位元素帶來的影響兼。

  z-index 屬性只能被應用與定位元素上帕氖。它為頁面增加了第三個維度並設置了元素的層級上的順序飽。

  定位屬性看起來好像很好理解比,但它的運作與它在表面所看到的有點兒不一樣位。你可能會覺得的是相對定位更加類似絕對定位戊堂瘓。當在做布局設計的時候你通常會想使用浮動並在指定的元素上應用定位來打破布局疲瞬。

原文寄︰http://www.cnblogs.com/shouce/archive/2016/03/10/5260471.html

TAG標簽襄田︰ 全面剖析CSS   Position定位  
一佰互聯是全國知名建站品牌服務商,我們有九年網站建設吉撅、網站制作說垮嘉、網頁設計羚躊畦、php開發和域名注冊及虛擬主機服務經驗搽,提供的自助建站服務更是全國有名殲俺。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版蕾戶,拖拽排版網站制作設計駕賀績,輕松實現pc站肥合、手機微網站擦麼濟、小程序雇部、APP一體化全網營銷網站建設 青題,已成功的為全國上百家網絡公司提供自助建站平台搭建服務冗違。

相關新聞more

14
05月
【SEO基礎入門】怎麼做好搜索引擎優化戰略規

計謀是個很虛的對象埃鯉,可計謀又長短常焦點的內容溶。說計謀虛蠟,每每是由于計謀的執行上不足踏實填巒,而導致計謀沒有憑證既定方針去執行酪碌。本日拋開戰術題目葛旗,... >>詳情

22
04月
使用 Docker 企業版搭建自己的私有注冊

Docker 真的很酷嘗敢,特別是和使用虛擬機相比夸衡摔,轉移 Docker 鏡像十分容易頹喪螺。如果你已準備好使用 Docker蘿,那你肯定已從 Docke... >>詳情

29
04月
PHP同時連接多個mysql數據庫示例代碼

實例麼痕喪︰ 復制代碼 代碼如下: <?php $conn1 = mysql_connect("127.0.0.1", "root","ro... >>詳情

20
04月
html5聲頻audio和視頻video等新

html5作為下一代web標準俏督,年前軒起了html5熱潮巍。對于html5我只是本著了解看看琴持贖。關于html5和RIA(silverlight承弟,... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群酥︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問陌︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
pk10 热购彩票 热购彩票