css 定位詳解

定位模式

static 靜態定位-> 幾乎不用

relative 相對定位

1 相對於原來在標準流中的位置來說的;

2 在原來標準流的區域繼續占有,後面盒子仍然以標準流方式對待它， 後面盒子不會動

相對定位 水平居中方法:

(1) margin : 0 auto；

absolute 絕對定位: 是元素帶有定位的父級元素來 移動位置

1 完全託標----完全不佔位置

2 父元素沒有定位，則瀏覽器為準定位

子絕父相 -》 子元素絕對定位，父元素相對定位

絕對定位水平居中方法:

(1) left:50%;

(2) margin-left: -100px; : 讓盒子向左移動 自身寬度的一半, 負值

fixed 固定定位

1 完全託標----完全不佔位置

2 只認瀏覽器的可視視窗---- 瀏覽器可視視窗 + 邊偏移屬性 來設定元素的位置

(1) 跟父元素沒有任何關係

(2) 不跟隨滾動條滾動

定位 = 定位模式 + 邊偏移

疊放順序

z-index 特性：

1 屬性值：正整數 負整數 或 0，數值越大，盒子越靠上

2 數字後面不能加單位

3 只能應用於 相對定位 ，絕對定位 和固定定位的元素， 其他標準流，浮動和靜態定位無效.

絕對定位改變display屬性

/*塊級元素 不給width 預設通欄顯示*/

/* 1 利用 display inline-block 行內塊不給 width 預設的寬度就是內容的寬度*/

/*display: inline-block;*/

/* 2 浮動, 也能轉換*/

/*float: left;*/

/*3. 絕對定位(固定定位) 也能轉換 */

/*position: absolute;*/

/*position: fixed;*/

height: 100px;

background-color: pink;

padding: 20px;

所以說: 乙個行內的盒子，如果加了浮動，固定定位 和絕對定位，不用轉換，就可以給這個盒子直接設定寬度和高度等

絕對定位和浮動不會觸發外邊距合併

css定位詳解

定位也是用來布局的，它有倆部分組成 定位 定位模式 邊偏移 邊偏移 簡單說，我們定位的盒子，是通過邊偏移來移動位置的。在css中，通過top bottom left和right屬性定義元素的邊偏移 top 頂端偏移量，定義元素相對於其父元素上邊線的距離 bottom 底部偏移量，定義元素相對於其父元...

詳解css 定位與定位應用

原文 定位的定義 在css中關於定位的內容是 position relative absolute static fixed static 沒有特別的設定，遵循基本的定位規定，不能通過z index進行層次分級。relative 不脫離文件流，參考自身靜態位置通過 top,bottom,left,r...

CSS定位屬性詳解

最近學習css相關知識，定位是其中的乙個難點。不了解其中細節，有時候在使用的時候會弄得一團糟。本篇文章整理下關於定位屬性的具體理解與應用。在介紹postion之前，有必要先了解下文件流。簡單說就是元素按照其在 html 中的位置順序決定排布的過程。html的布局機制就是用文件流模型的，即塊元素 bl...