CSS 定位模式

首先我們先做個乙個box巢狀2個box的模型

我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下：

relative 生成相對定位元素，元素所佔據的文件流的位置保留，元素本身相對自身原位置進行偏移。

.box1

absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上乙個設定了定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。

.box1

脫離了文件流的限制

對上一父級新增定位屬性，絕對路徑的參照點發生了改變

.con

fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。

.box1

static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性。

inherit 從父元素繼承 position 屬性的值。

修改層級

z-index 屬性越大排序越上（前）。預設0，依次排序

CSS定位模式

前兩天在面試美團前端職位的時候，被面試官問到了css中的定位，才發現自己對其只是簡單的了解，深入一點就被卡住了，所以今天反思一下，總結css中的一些定位知識。文件流 css的定位機制有3種 普通流 浮動和定位。普通流就是正常的文件流，沒有用css樣式去控制的html文件結構，你寫的介面的順序就是網頁...

CSS定位模式

定位模式有三種 常規流 normal flow 浮動 float 絕對定位 absolute positioning 一 常規流 1 塊級格式化上下文 2 行級格式化上下文 二 浮動 例如，如下 p標籤不受影響，而span受影響 src width 120 alt house got7是南韓jyp ...

css 定位連線 css絕對定位

定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...