html CSS中的相對定位和絕對位置使用總結

定位，指確定方位；確定或指出的地方；確定場所或界限（如通過勘察）給這個地產的界限定位。

在CSS中關於定位的內容是：position:relative | absolute | static | fixed。static 沒有特別的設定，遵循基本的定位規定，不能通過z-index進行層次分級。在本文流中，任何一個元素都被文字資料流所限制了自身的位置，但是通過CSS我們依然使得這些元素可以改變自己的位置，我們可以通過float來讓元素浮動，我們也可以通過margin來讓元素產生位置移動。

1. CSS中的絕對位置與相對定位詳細介紹

層級關係為：
<p ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
<p—————————-沒有設定為定位元素，不是參照物
<p———————- position:relative 參照物
<p box1
<p box2 ——–position:absolute; top:50px; left:120px;
<p box3

2. 關於CSS的相對定位與絕對位置介紹

一般如果我們不給元素設定position，則預設為static，此時是該元素是沒有定位的，像left/right這些位移屬性都是沒有效果的。

3.有關絕對位置的全面理解分析

因為元素的位置相對於它在普通流中的位置。絕對位置的元素的位置相對於最近的已定位祖先元素，
如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。

未被設定定位之前是大盒子包裹著小盒子，符合標準文檔流，片所示

4. Web前端面試題第八道—絕對位置與相對定位

相對定位（relative）：

先說相對定位：跟它的名一樣，相對嘛，要有一個參照物，但這個參照不是別的，是它自己在原來文檔流中的位置。相對定位之後的對象並沒有完全從文檔流中脫離，這個對象原來在文檔中的位置保留著（站著茅坑不拉屎），位移後的對象會把其它的層遮罩住。

5. 詳解CSS中三種基本的定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對位置。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

6. 總結css中常見的四個定位屬性（left right top bottom）

DIV CSS left right top bottom定位 這四個CSS屬性樣式用於定位對象盒子，必須定義position屬性值為absolute或者relative。

Left 當前元素的左側與父元素左側(就是原來預設位置)的距離值。

Right 當前元素的右側與父元素右側的距離值。

Top 當前對象頂部距離原位置頂部距離多少。

Bottom 當前對象底部距離原位置距離多少

7. 解析css的position裡的relative和absolute的區別

position有以下屬性：static、inherit、fixed、absolute、relative
前三個好理解好區分：
static：是預設狀態，沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
nherit：從父元素繼承 position 屬性的值。
fixed：產生絕對位置的元素，相對於瀏覽器視窗進行定位。（即滾動瀏覽器的時候，元素永遠固定顯示在視窗可視區的某個位置）。

比較常用而且會引起初學者迷惑的是absolute和relative，它倆有什麼分別呢？

8. HTML CSS決定定位、濾鏡詳細介紹

.position:relative;相對對位

不影響元素本身的特性；

不使元素脫離文檔流；

如果沒有定位位移量，對元素本身沒有任何影響；

定位元素位置控制：top/right/bottom/left；

IE6下父級的overflow：hidden是包不住子集的相對定位；解決只需要

給父級就加上定位元素；

在IE6下定位元素的父寬高都為奇數時，定位元素的bottom和right會有

1px的偏差

9. CSS Positioning(定位) | CSS 線上手冊

CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素後面，並指定一個元素的內容太大時，應該發生什麼。

元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決於定位方法.

有四種不同的定位方法。

相關問答：

1. html - css定位如何?下方的紅色訊息 在不同的手機寬度 是如何定位的

2. css - HTML定位問題 百分數 和 padding marggin border的衝突