資訊專欄INFORMATION COLUMN
摘要：定位的起始位置為此元素原先在檔流的位置。忽略和從父元素繼承該屬性的值以上的和可以使得元素脫離文檔流。絕對(duì)定位脫離檔流的布局，遺留下來的空間由后的元素填充。默認(rèn)定位表示此元素為默認(rèn)定位式。
Position（定位）
position可以取五個(gè)值
| 參數(shù) | 描述 |
|---|---|
| absolute | 絕對(duì)定位；脫離?檔流的布局，遺留下來的空間由后?的元素填充。定位的起始位置為最近的?元素(postion不為static)，否則為Body?檔本身。 |
| relative | 相對(duì)定位；不脫離?檔流的布局，只改變?身的位置，在?檔流原先的位置遺留空?區(qū)域。定位的起始位置為此元素原先在?檔流的位置。 |
| fixed | 固定定位；類似于absolute，但不隨著滾動(dòng)條的移動(dòng)?改變位置。 |
| static | 默認(rèn)值；默認(rèn)布局。 忽略 top, bottom, left, right和z-index |
| inherit | 從父元素繼承該屬性的值 |
以上的absolute 和fixed 可以使得元素脫離文檔流。
position屬性只是定義元素的定位方式，要想此元素能按照希望的位置顯示，就需要使?下?的屬性(position:static不?持這些)：
left ： 表示向元素的左邊插?多少像素，使元素向右移動(dòng)多少像素。
right ：表示向元素的右邊插?多少像素，使元素向左移動(dòng)多少像
素。
top ：表示向元素的上?插?多少像素，使元素向下移動(dòng)多少像素。
bottom ：表示向元素的下?插?多少像素，使元素向上移動(dòng)多少像
素。
上?屬性的值可以為負(fù)，單位：px 。絕對(duì)定位(absolute)
脫離?檔流的布局，遺留下來的空間由后?的元素填充。相對(duì)定位(relative)定位的起始位置為最近的?元素(postion不為static)，否則為Body?檔
本身。
不脫離?檔流的布局，只改變?身的位置，在?檔流原先的位置遺留空?區(qū)域。固定定位(fix)定位的起始位置為此元素原先在?檔流的位置。
類似于absolute，但不隨著滾動(dòng)條的移動(dòng)?改變位置。默認(rèn)定位(static)
表示此元素為默認(rèn)定位?式。繼承(inherit)
從父元素繼承定位?式。
1.父容器的position屬性為relative
由上圖可知，div繼承了父類的position屬性（relative）;這時(shí)候div-a沒有脫離文檔流，只是相對(duì)于原來的位置向右邊偏移了，留下一個(gè)空位。參考絕對(duì)定位的圖形。
注意：此時(shí)的父容器是沒有設(shè)置寬高的，（見圖），我們可以看見父容器寬度為100%，高度自適應(yīng)。
下面我們把父容器的定位改成absolute
2.父容器的position屬性為absolute
可以看出，div-a脫離了文檔流，相對(duì)于父容器向右偏移了350px，后面的div-b占據(jù)了他的位置.
注意：此時(shí)我們可以發(fā)現(xiàn)，父容器寬和高都是自適應(yīng)的。
然后我們?cè)趯?duì)兩種情況進(jìn)行研究。
父容器postion屬性為static
父容器寬度為100%，高度自適應(yīng)。
父容器的position屬性為fixed
父容器寬高均自適應(yīng)
從這里面。我們不僅可以看出inherit的特性。而且我們還發(fā)現(xiàn)了以下規(guī)則：
重點(diǎn)
在父容器沒有設(shè)置寬高的時(shí)候，
當(dāng)父容器定位為relative和static時(shí)，及沒有脫離文檔流時(shí)，寬度為100%
當(dāng)父容器定位為absolute和fixed時(shí)，及脫離文檔流時(shí)，寬高為自適應(yīng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/114475.html
摘要：注意當(dāng)該固定元素的祖先元素的屬性非時(shí)，容器由瀏覽器窗口改為該祖先元素粘性定位，相當(dāng)于相對(duì)定位和固定定位的混合。粘性定位根據(jù)一個(gè)閾值決定，在大于等于閾值時(shí)采用相對(duì)定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個(gè) 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...
摘要：塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。相對(duì)定位，相對(duì)于自己的初始位置，不脫離文檔流。 有過css開發(fā)經(jīng)驗(yàn)的同學(xué)，對(duì)于position這個(gè)屬性一定不會(huì)陌生，然而這個(gè)熟悉的屬性確是面試題中的?？停簿驼f明了該屬性在css的世界是有一定的江湖地位的，那么我們就來詳細(xì)的說說position這個(gè)屬性。 在w3school中是這樣解釋posi...
摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位，固定定位。我的回答是相對(duì)自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。 一 前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。 二 正文 1.文檔流布局的概念 將窗體自上而下分成一行行， 并在每行中按從左至右的...
摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...
摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...
摘要：脫離了文檔流不為元素預(yù)留空間，通過指定元素相對(duì)于最近的非定位祖先元素的偏移，來確定元素位置。在所有情況下即便被定位元素為時(shí)，該元素定位均不對(duì)后續(xù)元素造成影響。否則其行為與相對(duì)定位相同。生效規(guī)則須指定或四個(gè)閾值其中之一，才可使粘性定位生效。CSS position屬性用于指定一個(gè)元素在文檔中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。 常見語(yǔ)法 stat...
閱讀 2917·2021-09-28 09:36
閱讀 4049·2021-09-22 15:52
閱讀 3726·2021-09-06 15:00
閱讀 2017·2021-09-02 15:40
閱讀 2859·2021-09-02 15:15
閱讀 3571·2021-08-17 10:15
閱讀 2839·2019-08-30 15:53
閱讀 2141·2019-08-29 18:39
