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

資訊專欄INFORMATION COLUMN

css定位總結(jié)

GT / 2994人閱讀

摘要：的默認(rèn)值，表示元素按照標(biāo)準(zhǔn)文檔流定位，設(shè)置，，，，無效。脫離文檔流意味著文檔流里的元素會當(dāng)它不存在一樣定位。代碼如下效果圖脫離文檔流的固定定位，元素會相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。

position:static;//position的默認(rèn)值，表示元素按照標(biāo)準(zhǔn)文檔流定位，設(shè)置left，top，right，bottom，z-index無效。

position:relative;//按照標(biāo)準(zhǔn)文檔流相對定位，不設(shè)置left，top，right，bottom，z-index時，位置和static時一樣，設(shè)置left，top，right，bottom，z-index時會相對于它在static時的位置定位。其他的元素的位置則不會受該元素的影響發(fā)生位置改變來彌補(bǔ)它偏離后剩下的空隙。也就是說其它元素的位置和它是static時一樣。代碼如下：

效果圖：

div3是relative定位，位置偏移了，但div4的位置仍然和div3為偏移時一樣。

position: absolute;脫離文檔流的絕對定位。脫離文檔流意味著文檔流里的元素會當(dāng)它不存在一樣定位。absolute是相對于它的第一個定位不是static的祖先元素定位。如果絕對定位（position屬性的值為absolute）的元素沒有“positioned”祖先元素，那么它是相對于文檔的 body 元素，并且它會隨著頁面滾動而移動。代碼如下：




    div2
    
div3

    
div4

效果圖：

position:fixed;脫離文檔流的固定定位，元素會相對于視窗來定位，這意味著即便頁面滾動，它還是會停留在相同的位置。和 relative 一樣， top 、 right 、 bottom 和 left 屬性都可用。

position:sticky"粘性定位。是一個新的css3屬性。

它的表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標(biāo)位置。（這是網(wǎng)上的大多數(shù)說法，但不完全對，這只適用于sticky定位元素是body的子元素時的情況。如果sticky定位元素的父元素，情況就會不一樣。具體的請看下面的代碼分析）

但總的來說元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位，只是固定定位相對的對象比較復(fù)雜不一定是瀏覽器窗口。
并且 top 和 bottom 同時設(shè)置時，top 生效的優(yōu)先級高，left 和 right 同時設(shè)置時，left 的優(yōu)先級高

以下是我經(jīng)過測試后的結(jié)果：
position:sticky生效條件：
1、設(shè)置了top或bottom，left或right
2、父元素要全部可見，這里的可見是指父元素本身不能被父元素的父級元素的overflow:hidden給蓋住，使父元素的最小高度不能全部可見。
3、父元素本身不能設(shè)置overflow:hidden。
4、如果父元素的overflow的值為auto、scroll等使得父元素的內(nèi)容不溢出的屬性時，sticky定位的元素的定位是相對于它的父元素的而不是瀏覽器窗口。如果父元素的內(nèi)容允許溢出且溢出內(nèi)容超出瀏覽器窗口，sticky定位的元素的定位是相對于瀏覽器窗口的。
下面是測試代碼：

 
    

        

        
頂部

        
    
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
  • 內(nèi)容
    • 
            
  • 內(nèi)容
  • 內(nèi)容
    • 
        

        
底部

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

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

相關(guān)文章

  • 前端面試之CSS總結(jié)(上)

    摘要：重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細(xì)，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

    ?。?。 評論0 收藏0

  • 垂直居中相關(guān)知識總結(jié)

    摘要：垂直居中相關(guān)知識總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在上提問了個問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在SF上提問了個問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對定...

    Labradors 評論0 收藏0

  • 垂直居中相關(guān)知識總結(jié)

    摘要：垂直居中相關(guān)知識總結(jié)前言工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在上提問了個問題關(guān)于垂直居中，大家有沒有什么比較好的建議。 垂直居中相關(guān)知識總結(jié) 前言 工作中用到了很多關(guān)于垂直居中相關(guān)的知識之前，在SF上提問了個問題CSS關(guān)于垂直居中，大家有沒有什么比較好的建議。非常感謝各位前輩對我的幫助，前輩們給的答案都非常多也各式各樣，我覺得有必要把大家的回答總結(jié)一下。 方法總結(jié) 一、絕對定...

    GeekGhc 評論0 收藏0

  • 前端計(jì)劃——面試題總結(jié)-CSS篇

    摘要：定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間?？梢灾缹傩杂幸韵聨讉€特點(diǎn)該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

    馬永翠 評論0 收藏0

  • CSS屬性用法總結(jié)

    摘要：輪廓不被視為頁面的一部分，因此在應(yīng)用它們時不會導(dǎo)致頁面布局被調(diào)整。 1.background系列屬性 在為元素設(shè)定樣式的時候，往往需要為該元素設(shè)置背景，一般有顏色，背景圖片等． 1.1 背景顏色 在CSS類中使用background-color屬性為元素設(shè)置背景顏色： /* CSS */ .box { width: 200px; heig...

    soasme 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<