前兩天在面試美團前端職位的時候，被面試官問到了css中的定位，才發現自己對其只是簡單的了解，深入一點就被卡住了，所以今天反思一下，總結css中的一些定位知識。
文件流
css的定位機制有3種：普通流、浮動和定位。
普通流就是正常的文件流，沒有用css樣式去控制的html文件結構，你寫的介面的順序就是網頁展示的順序（將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流)。
每個非浮動塊級元素都獨佔一行, 浮動元素則按規定浮在行的一端. 若當前行容不下, 則另起新行再浮動
相對定位, 即相對於元素在文件流中位置進行偏移. 但保留原佔位。所以position:relative是很好的建立定位祖先元素的方法.,因為它不會離開常規流。使用這種方法，能夠建立出既保持常規流又實現絕對定位的布局。相對定位自己通過定位跑開了還占用著原來的位置
絕對定位, 即完全脫離文件流, 使元素相對於常規流的位置或最近定位祖先元素的位置偏移一定聚距離，即如果某一元素設定為定位元素後，那麼它就成為了最近的絕對定位後代元素的定位參考點。如果物件的父級沒有設定定位屬性，即還是遵循html定位規則的，則依據 body 物件左上角作為參考進行定位。絕對定位物件會讓出自己原先占用位置.
靜態定位, 取消元素的定位設定，使之恢復為原先在常規流中的顯示方式。static是position的預設值
固定定位, 即完全脫離文件流，使元素相對於視口偏移一定的距離。
堆疊順序
css使用z-index控制元素的堆疊順序。z-index只能工作在被明確定義了absolute，fixed或relative 這三個定位屬性的元素中。靜態定位元素安裝文件出現順序從後往前進行堆疊的。設定位置元素則忽略文件出現順序，根據z-index值由小到大的順序從後往前堆疊。設定為負值z-index的設定位置元素位於靜態定位元素和非設定位置浮動元素之下。z-index值不必是連續的，其預設值是auto.
絕對定位和相對定位
絕對定位position:absolute,可以將任何元素渲染為絕對框。使用width和height，可以設定它的尺寸。百分數是相對於最近定位祖先元素的尺寸而言，而非父元素的尺寸。將元素的left,right,top和bottom設定為特定值，可以使它對齊到最近定位祖先元素的各邊。或者，將元素的left,right,top和bottom設定為auto，可以使它恢復原先在常規流中的位置。在祖先元素中設定position:relative、position:absolute、position:fixed，可以使之變成設定位置的元素。如果不存在定位祖先元素，瀏覽器會將作為最近定位祖先元素。絕對定位的位置不受其他元素和內容的影響，也不會影響其他元素和內容的位置。因此他們可能會重疊。
相對定位position:relative,將元素設定為相對定位，就可以控制元素在常規流中的堆疊順序。使用z-index,可以設定元素相對於其他設定位置元素的堆疊順序。相對定位元素不會離開常規流，也不會改變它在常規流中形狀。例如，·如果乙個行內元素包含多行內容（換行），那麼設定為相對定位之後，它仍然保留其特殊布局。與之相反，絕對定位則會將行內元素變成絕對框，並在絕對塊級框中重新排列內容，而這可能會改變它的布局。
CSS定位模式
定位模式有三種 常規流 normal flow 浮動 float 絕對定位 absolute positioning 一 常規流 1 塊級格式化上下文 2 行級格式化上下文 二 浮動 例如，如下 p標籤不受影響，而span受影響 src width 120 alt house got7是南韓jyp ...
CSS 定位模式
首先我們先做個乙個box巢狀2個box的模型 我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下 relative 生成相對定位元素，元素所佔據的文件流的位置保留，元素本身相對自身原位置進行偏移。box1效果 absolute 生成絕對定位元素，元素脫離文件流，...
css 定位連線 css絕對定位
定位的四種模式 static,relative,absolute,fixed 定位的四個位置 left,right,top,bottom 定位屬性 position,有四種狀態值 1.static 靜態定位,按元素在文件流中的順序排列,這是預設值,四個位置無效 2.relative 相對定位,元素相...