日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Position屬性有哪些值，各有什么特點(diǎn)？

[[409479]]

本文轉(zhuǎn)載自微信公眾號(hào)「三分鐘學(xué)前端」，作者sisterAn。轉(zhuǎn)載本文請(qǐng)聯(lián)系三分鐘學(xué)前端公眾號(hào)。

右江網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,右江網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為右江超過(guò)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的右江做網(wǎng)站的公司定做！

positon

定義和用法：position 屬性規(guī)定元素的定位類型。

說(shuō)明：這個(gè)屬性定義建立元素布局所用的 定位機(jī)制 。任何元素都可以定位，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。

—— 來(lái)自 w3school

position 有以下可選值：

值 描述
absolute生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 left 位置添加 20 像素。
stickyCSS3 新增，粘性定位，相對(duì)于最近的一個(gè)擁有“滾動(dòng)機(jī)制”的祖先上（當(dāng)該祖先的overflow 是 hidden, scroll, auto 或 overlay時(shí)，即不是 visible 時(shí)）。它的行為就像 position:relative 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed，它會(huì)固定在目標(biāo)位置。
static默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中 （忽略 left、top、right、bottom 或者 z-index 聲明）。
inherit規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

其中，CSS 定位機(jī)制：

CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。

除非專門(mén)指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。

行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框(Line Box)，行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。

position: absolute;

絕對(duì)定位 ，絕對(duì)定位的元素的位置相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于 :

 
 
 
 
    
  
  
  
  
  1. one
 
  • two
    •  
  • three
    •   
     
 
 
 
      
  
  
  
  
    1. div { 
      2. 
  
  
  
  
    2.     width: 100px; 
      3. 
  
  
  
  
    3.     height: 100px; 
      4. 
  
  
  
  
    4. } 
      5. 
  
  
  
  
    5.  
      6. 
  
  
  
  
    6. .one { 
      7. 
  
  
  
  
    7.     background: red; 
      8. 
  
  
  
  
    8. } 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. .two { 
      11. 
  
  
  
  
    11.     background: yellow; 
      12. 
  
  
  
  
    12.     position: absolute; 
      13. 
  
  
  
  
    13.     top: 50px; 
      14. 
  
  
  
  
    14.     left: 50px; 
      15. 
  
  
  
  
    15. } 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17. .three { 
      18. 
  
  
  
  
    18.     background: green; 
      19. 
  
  
  
  
    19. } 
      20.

    position: fixed;

    固定定位 ，與絕對(duì)定位相似，但元素的包含塊為 viewport 視口。該定位方式常用于創(chuàng)建在滾動(dòng)屏幕時(shí)仍固定在相同位置的元素。在下面的示例中，"one" 元素定位在離頁(yè)面頂部 80px，離頁(yè)面左側(cè) 20px 的位置。

      
 
 
 
      
   
  
  
  
    1.  
      2. 
   
  
  
  
    2.  one
     
  •  two
    •  
  •   
     
 
 
 
      
  
  
  
  
    1. .an { 
      2. 
  
  
  
  
    2.     width: 500px; 
      3. 
  
  
  
  
    3.     height: 300px; 
      4. 
  
  
  
  
    4.     overflow: scroll; 
      5. 
  
  
  
  
    5.     background: indianred; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7.  
      8. 
  
  
  
  
    8. .one { 
      9. 
  
  
  
  
    9.     position: fixed; 
      10. 
  
  
  
  
    10.     top: 50px; 
      11. 
  
  
  
  
    11.     left: 50px; 
      12. 
  
  
  
  
    12.     background: red; 
      13. 
  
  
  
  
    13.     width: 100px; 
      14. 
  
  
  
  
    14.     height: 100px; 
      15. 
  
  
  
  
    15.     color: white; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. .two { 
      19. 
  
  
  
  
    19.     background: yellow; 
      20. 
  
  
  
  
    20.     height: 500px; 
      21. 
  
  
  
  
    21. } 
      22.

    position: relative;

    相對(duì)定位 ，相對(duì)于其正常位置進(jìn)行定位，不影響其他元素的偏移。

     
 
 
 
      
  
  
  
  
    1. one
     
  • two
    •  
  • three
    •   
     
 
 
 
      
  
  
  
  
    1. div { 
      2. 
  
  
  
  
    2.     width: 100px; 
      3. 
  
  
  
  
    3.     height: 100px; 
      4. 
  
  
  
  
    4.     color: white; 
      5. 
  
  
  
  
    5. } 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. .one { 
      8. 
  
  
  
  
    8.     background: red; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11. .two { 
      12. 
  
  
  
  
    12.     background: yellow; 
      13. 
  
  
  
  
    13.     position: relative; 
      14. 
  
  
  
  
    14.     top: 50px; 
      15. 
  
  
  
  
    15.     left: 50px; 
      16. 
  
  
  
  
    16. } 
      17. 
  
  
  
  
    17.  
      18. 
  
  
  
  
    18. .three { 
      19. 
  
  
  
  
    19.     background: green; 
      20. 
  
  
  
  
    20. } 
      21.

    position: sticky;

    粘性定位 ，可以被認(rèn)為是相對(duì)定位和固定定位的混合。元素在跨越特定閾值前為相對(duì)定位，之后為固定定位

    這是一個(gè)結(jié)合了 position:relative 和 position:fixed 兩種定位功能于一體的特殊定位。常見(jiàn)的吸頂、吸底(頭部返回欄，底部切換欄等)的效果都是使用這個(gè)屬性：

    注意：

    • 須指定 top 、 right 、 bottom 、 left 四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對(duì)定位相同。并且 top 和 bottom 同時(shí)設(shè)置時(shí)，top 生效的優(yōu)先級(jí)高，left 和 right 同時(shí)設(shè)置時(shí)，left 的優(yōu)先級(jí)高。
    • 設(shè)定為 position:sticky 元素的任意父節(jié)點(diǎn)的 overflow 屬性必須是 visible，否則 position:sticky 不會(huì)生效。如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 overflow:hidden，則父容器無(wú)法進(jìn)行滾動(dòng)，所以 position:sticky 元素也不會(huì)有滾動(dòng)然后固定的情況。如果 position:sticky 元素的任意父節(jié)點(diǎn)定位設(shè)置為 position:relative | absolute | fixed，則元素相對(duì)父元素進(jìn)行定位，而不會(huì)相對(duì) viewport 定位。
    • 達(dá)到設(shè)定的閥值，也就是設(shè)定了 position:sticky 的元素表現(xiàn)為 relative 還是 fixed是根據(jù)元素是否達(dá)到設(shè)定了的閾值決定的。

    position: static;

    靜態(tài)定位 ，HTML 元素默認(rèn)情況下的定位方式為 static(靜態(tài))，靜態(tài)定位的元素不受 top、bottom、left 和 right 屬性的影響，它始終根據(jù)頁(yè)面的正常流進(jìn)行定位

    position: inherit;

     

    inherit 值如同其他 css 屬性的 inherit 值，即繼承父元素的 position 值。


    文章題目：Position屬性有哪些值，各有什么特點(diǎn)？
    URL鏈接：http://www.dlmjj.cn/article/dhgiisp.html