成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

css定位總結(jié)

GT / 3047人閱讀

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

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

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

效果圖：

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

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




    div2
    
div3

    
div4

效果圖：

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

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

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

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

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

 
    

        

        
頂部

        
    
            
  • 內(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113128.html

相關(guān)文章

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

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

    ?。?。 評(píng)論0 收藏0

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

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

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

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

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

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

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

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

    馬永翠 評(píng)論0 收藏0

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<