成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于CSS的position屬性

loostudy / 1030人閱讀

摘要：元素脫離文檔流元素相對(duì)于它包含的元素進(jìn)行定位，相對(duì)于所有其他元素，絕對(duì)定位的元素是獨(dú)立定位的。元素脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位與其他所有元素獨(dú)立大多數(shù)瀏覽器支持，除外大概也沒有公司要求必須支持了。。

未完待續(xù)......最近在讀《CSS secrets》, 看完再來補(bǔ)充……

position

CSS的position屬性用于指定元素的定位類型。默認(rèn)值: static

4個(gè)可能的值: static

元素按常規(guī)文檔流（從左到右 從上到下）定位；

靜態(tài)定位的元素不能使用 top, right, bottom 和 left 屬性進(jìn)行定位。

absolute

元素脫離文檔流；

元素相對(duì)于它包含的元素進(jìn)行定位，相對(duì)于所有其他元素，絕對(duì)定位的元素是獨(dú)立定位的。

它的定位要么相對(duì)于最近的祖先元素，要么相對(duì)于文檔本身。

fixed

元素脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位；

與其他所有元素獨(dú)立；

大多數(shù)瀏覽器支持，IE6 除外（大概也沒有公司要求必須支持 IE6 了=。=）。

relative

元素按照常規(guī)文檔流布局，它的定位相對(duì)于他文檔流中的位置進(jìn)行調(diào)整；

系統(tǒng)保留元素在正常文檔流中的空間，不會(huì)因?yàn)橐畛淇臻g而將其個(gè)邊合攏，也不會(huì)將元素從新的位置“推開”。

一些實(shí)例 
position 的值為 static 以外的值的元素，可通過設(shè)置元素 top 和 left 屬性指定其左邊緣到容器（通常是文檔本身）左邊緣的距離和其上邊緣到容器上邊緣的距離。

例如，定位一個(gè)距離文檔左、上邊緣分別是 100px 的 div 元素，可以指定如下樣式：

如果一個(gè)元素使用絕對(duì)定位，它的 top 和 left 屬性是它相對(duì)于 position 屬性設(shè)置為出 static 以外的祖先元素的上、左邊緣的距離。如果它沒有設(shè)置過除 static 以外的祖先，則使用文檔邊緣進(jìn)行定位。


    

        
div1-1

    

    
    

        
div2-1

效果如下：

任何絕對(duì)定位的子元素都相對(duì)于容器進(jìn)行定位。
使用 top 和 left 定位元素的左上角位置是常見的定位方法，也可以使用 right 和 bottom 對(duì)指定元素相對(duì)于容器的右、下邊緣進(jìn)行定位。
除了指定元素 width 來確定元素寬度，還可用過指定 left 和 right 的方式（同樣，也可通過指定 top 和 bottom 來指定元素的高度）。 同時(shí)指定時(shí)，width 優(yōu)先級(jí)高于 right/left, height 優(yōu)先級(jí)高于 bottom/top; left 優(yōu)先級(jí)高于 right, top 優(yōu)先級(jí)高于bottom.
沒必要給每一個(gè)動(dòng)態(tài)元素指定尺寸。 某些元素（如圖片）具有固定尺寸。對(duì)于包含文本或其他流式內(nèi)容的動(dòng)態(tài)元素通常指定寬度就足夠了，讓布局決定它的高度。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115242.html

相關(guān)文章

  • 向Zepto學(xué)習(xí)關(guān)于"偏移"的那些事

    摘要：獲得當(dāng)前元素相對(duì)于的位置。返回一個(gè)對(duì)象含有和當(dāng)給定一個(gè)含有和屬性對(duì)象時(shí)，使用這些值來對(duì)集合中每一個(gè)元素進(jìn)行相對(duì)于的定位。獲取對(duì)象集合中第一個(gè)元素相對(duì)于其的位置。結(jié)尾以上就是中與偏移相關(guān)的幾個(gè)的解析，歡迎指出其中的問題和有錯(cuò)誤的地方。 前言 這篇文章主要想說一下Zepto中與偏移相關(guān)的一些事，很久很久以前，我們經(jīng)常會(huì)使用offset、position、scrollTop、scrollLe...

    hzx 評(píng)論0 收藏0

  • 關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

    摘要：非根元素，且其屬性是和的元素的包含塊它的包含塊是由最近的祖先塊容器盒的內(nèi)容區(qū)域創(chuàng)建的。如何觸發(fā)只需要保證滿足下面至少一條就會(huì)觸發(fā)根元素設(shè)置了值不為的元素設(shè)置了屬性不為的元素設(shè)置了屬性不為和的元素設(shè)置了的值為和中的任何一個(gè)的元素。 作者：心葉時(shí)間：2018-04-18 17:53 包裹元素剪裁條件 是不是包裹元素overflow設(shè)置為hidden以后，內(nèi)部元素如果超過包裹元素的話就會(huì)被剪...

    codercao 評(píng)論0 收藏0

  • 一些面試時(shí)關(guān)于 CSS 的問題

    摘要：可以試試去掉的會(huì)發(fā)生很奇妙的事呢附加關(guān)于子元素設(shè)置為而引發(fā)的問題。附加關(guān)于開啟硬件加速提升網(wǎng)站動(dòng)畫渲染性能問題。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 1. 水平垂直居中問題 這可以說是最經(jīng)典的問題了，水平垂直居中，這個(gè)問題從入門前端一直到面試，甚至到工作之后都會(huì)時(shí)不時(shí)遇到，最近的面試也被問過這之類的問題，這里還是好好總結(jié)一番，以作備忘。公用 HTML 部分： ...

    HackerShell 評(píng)論0 收藏0

  • 關(guān)于CSS中的背景屬性background簡(jiǎn)述

    摘要：屬性控制背景圖片在被屬性改變了大小及被屬性定位后如何平鋪。可用于此屬性的關(guān)鍵字為和。對(duì)于長度和百分比，我們也可以指定沿軸和軸的位置。屬性指定背景圖片應(yīng)根據(jù)盒模型的哪個(gè)區(qū)域進(jìn)行定位。最后，屬性是其他背景相關(guān)屬性的簡(jiǎn)寫。 像我之前提到的那樣，文檔樹中的每個(gè)元素只是一個(gè)矩形盒子。這些盒子都有一個(gè)背景層，背景層可以是完全透明或者其它顏色，也可以是一張圖片。此背景層由8個(gè)CSS屬性（加上1個(gè)簡(jiǎn)寫...

    tomorrowwu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<