css定位總結

GT 發布于2019-08-29 15:08 / 2988人閱讀

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

position:static;//position的默認值，表示元素按照標準文檔流定位，設置left，top，right，bottom，z-index無效。

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

效果圖：

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

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



    div2
    div3
    div4

效果圖：

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

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

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

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

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

 
    
        
        頂部
        
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
內容
            內容
內容
        
        底部

云服務器 GPU云服務器年終總結網絡總結方法總結函數總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113128.html

前端面試之CSS總結(上)

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

琛ｈ。 2019-08-29 11:18 評論0 收藏0
垂直居中相關知識總結

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

Labradors 2019-08-19 17:31 評論0 收藏0
垂直居中相關知識總結

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

GeekGhc 2019-08-01 15:02 評論0 收藏0
前端計劃——面試題總結-CSS篇

摘要：定位使元素的位置與文檔流無關，因此不占據空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。前端面試之CSS篇 1、三種基本引入方式外部樣式表內部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

馬永翠 2019-08-29 13:09 評論0 收藏0
CSS屬性用法總結

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

soasme 2019-08-29 12:57 評論0 收藏0