CSS 各種定位（position）方式的區別

i_garfileo 發布于2019-08-29 11:18 / 435人閱讀

摘要：絕對定位元素從文檔流刪除，并相對于包含塊定位。固定定位元素從文檔流刪除，并相對于瀏覽器視窗定位，因此不隨文檔滾動而移動。

定位（position）

position: relative/absolute/fixed/static/inheri

absolute :生成絕對定位的元素， 相對于最近一級的 定位不是 static 的父元素來進行定位。

fixed （老IE不支持）生成絕對定位的元素，通常相對于瀏覽器窗口或 frame 進行定位。

relative 生成相對定位的元素，相對于其在普通流中的位置進行定位。

static 默認值。沒有定位，元素出現在正常的流中

sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

static：靜態定位

是position的默認值，元素框正常生成，也就是沒有定位時的正常顯示。

relative：相對定位

用法一：元素相對自身的原位置偏移某個距離，但是原本的空間依舊保留，表現為空白。
用法二：把一個元素設置為position: relative; 可以使該元素的子元素相對該元素絕對定位。

absolute：絕對定位

元素從文檔流刪除，并相對于包含塊定位。元素在原本的空間關閉。元素定位后生成一個塊級框，不論它原來是行內元素還是塊級元素。
包含塊：最近的position值不是static的祖先元素（塊級或行內），一般會指定一個元素作為絕對定位元素的包含塊，將其position設置為relative而且沒有偏移。

fixed：固定定位

元素從文檔流刪除，并相對于瀏覽器視窗定位，因此不隨文檔滾動而移動。元素在原本的空間關閉。元素定位后生成一個塊級框，不論它原來是行內元素還是塊級元素。與絕對定位的區別僅僅是包含塊不同。
包含塊：瀏覽器視窗。

sticky:CSS3新增屬性，FF和safari支持
當定位內容在窗口中時，定位不起作用，類似于relative；但是當定位內容快要移出窗口時，相對窗口定位，類似于fixed；更詳細一點：當且僅當包含塊在水平位置超出窗口范圍時，left定位才有意義；當且僅當包含塊在垂直位置超出窗口范圍時，top定位才有意義；

在FF中的測試代碼：

absolute/fixed和float對比

類似：元素都會從文檔流刪除，但是依舊會影響布局；都會生成一個塊級框，無論原來是不是塊級元素。
區別：float的包含塊是最近的塊級祖先元素。

偏移屬性：top/right/bottom/left，初始值是auto。

采用position定位之后必須采用偏移屬性定義偏移量，也就是相對包含塊的偏移。注意應用于position值不是static的元素。

有時也需要定義width和heigth，但是可能會和偏移屬性的定義沖突，因為四個偏移屬性實際上已經定義了元素的大小。此時，根據width和left屬性定義左右，根據top和height屬性定義上下。

CSS常見居中技巧

文本水平居中：

text-align: center;

div水平垂直居中：
父級div設置為positon: relative，需要居中的div元素設置以下樣式：

        {position: absolute;
        width:400px;height:200px;
        left:50%;top:50%;
        margin-left:-200px;margin-top:-100px;
        border:1px solid #00F;
        }

解釋：設置元素為position: absolute使元素相對父級元素定位，然后以百分比形式設置相對父級元素的偏移量，設置為偏移50%并非是完全居中，還需要消除div本身的寬度和高度的影響，設置margin-left和margin-top為一半寬度和高度的負值，此時完全居中。

div水平居中：

        margin: 0 auto;

如果還需要文本居中，設置

        text-align: center;

內容溢出overflow: visible/ hidden/ scroll /auto/ inherit，初始值是visible。

一個元素的大小固定，但是其內容放不下，就會導致溢出。overflow控制溢出部分的可見（visible）、不可見（hidden）、滾動可見（scroll）。

元素可見性visibility: visible/ hidden/ collapse/ inherit，初始值是visible。

visibility:hidden和display:none的區別：visibility:hidden設置元素不可見，但是元素依舊會影響布局，只是元素部分呈現為空白；display:none元素不顯示并且從文檔流中刪除，對文檔布局沒有任何影響。

云服務器 GPU云服務器 position定位各種域名的區別各種編程語言的區別 position，css

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

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

CSS原生布局方式

摘要：布局任何元素在默認的情況下都是處于整個文檔流中的，不會浮動的。相對定位如果想為元素設置層級布局模型中的相對定位，需要設置表示相對定位，它通過屬性確定元素在正常文檔流中的偏移位置。 showImg(https://segmentfault.com/img/remote/1460000009753577); 前言網頁原生布局的方法其實網上有很多，大概為Flow（流動布局模型）、Float...

PingCAP 2019-08-20 17:14 評論0 收藏0
CSS知識點及技巧整理

摘要：當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。詳見浮動與清除浮動浮動相關知識屬性的取值元素向左浮動。是相對長度單位，相對于當前對象內文本的字體尺寸。這些個知識點是我個人認為的，下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設置：display: flex; justify-content: cent...

masturbator 2019-08-30 14:02 評論0 收藏0
CSS知識點及技巧整理

摘要：當元素在容器中被滾動超過指定的偏移值時，元素在容器內固定在指定位置。詳見浮動與清除浮動浮動相關知識屬性的取值元素向左浮動。是相對長度單位，相對于當前對象內文本的字體尺寸。這些個知識點是我個人認為的，下面我們就來看看這些個知識點。 1.怎么讓一個不定寬高的 DIV，垂直水平居中? 使用Flex 只需要在父盒子設置：display: flex; justify-content: cent...

EasonTyler 2019-08-01 18:38 評論0 收藏0
那些年，碰上過的面試題

摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發哪個觸發順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發阮一峰動畫動畫與動畫區別性能區別性能優化動畫性能優化動畫介紹后續還會繼續進行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數 join / slice / splice / sort / pu...

bitkylin 2019-08-29 16:24 評論0 收藏0
那些年，碰上過的面試題

摘要：元素在跨越特定閾值前為相對定位，之后為固定定位。和簡單介紹和，哪個會觸發哪個觸發順序，哪個能夠避免，哪個時盡量減少而不可能避免，哪些操作會觸發阮一峰動畫動畫與動畫區別性能區別性能優化動畫性能優化動畫介紹后續還會繼續進行面試題的積累記錄一下最近碰上的面試題 js篇介紹一下Array的API/方法，具體到返回值和參數 join / slice / splice / sort / pu...

nicercode 2019-08-26 12:12 評論0 收藏0