position定位——讓人又愛又恨的屬性

時間 2019-11-17

標籤 position 定位讓人屬性欄目 CSS 简体版

原文原文鏈接

關於css中的position這個屬性，在使用的時候，有時很強大，有時又讓人很無奈。css

強大的時候，對於div中的一些小物件不方便使用margin或者padding的時候，給與position:absolute;再配備left、right、top和bottom，基本上就是想放哪裏放哪裏了。瀏覽器

讓人無奈的時候，就是咱們一旦濫用了position這個定位屬性，就會讓本身的佈局飛的滿天是，又由於z-index沒有設定好，基本上，總體的佈局就會讓你手足無措，找緣由的話，又很是麻煩，最後，恐怕只能推倒重作了。佈局

因此，對待position這個屬性，咱們要詳細的瞭解到它運行的原理，以及應用的場景，這樣，咱們才能夠在想用的時候完美的驅使它來完成咱們想要的效果。spa

廢話很少說，直接上步驟，先說position的概念吧code

position,咱們百度一下，就知道這個單詞的意思是方位，在css中，就是定位的意思，屬性名字是 position，屬性值有五個，分別是 static（默認定位）、absolute（絕對定位）、relative（相對定位）、fixed（固定定位）、inherit（繼承定位，不經常使用）。blog

書寫規則：排序

position:static|absolute|relative|fixed|inherit

每一個屬性值都介紹一下吧繼承

一、position:static（默認定位）ip

顧名思義，就是咱們日常書寫的時候，每一個div在文檔流中默認的排版，就是static屬性值，它不會讓div或者其餘元素脫離文檔流，而是遵循排版的原則，從上到下，塊級元素換行，行內元素不換行等等通用原則，因此，若是不用定位屬性，那麼這個position就不用設置。文檔

二、position：relative（相對定位）

相對定位，就是相對於本身自己進行定爲移動，它不會脫離文檔流，也就是說，我給一個元素設定了這個屬性，那麼這個文件還會在這個文檔流中來回移動，至於怎麼移動，下面再講。

三、position：absolute（絕對定位）

跟相對定位不一樣，它是相對於擁有相對定位屬性的父元素進行定位移動，它會脫離文檔流。

若是父元素中的全部子元素都設置了absolute，那麼全部的子元素都會浮起來，而後堆疊到一起，因此爲了把各個元素攤開顯示，咱們須要移動這些元素，而移動這些元素的方法，就是直接是style樣式表中書寫：left、right、top、bottom四個屬性，而後在屬性的後面寫上px(像素)、%（百分比）等能夠表示距離的單位。

　　在這裏，咱們要特別強調，left和right不能同時使用，top和bottom不能同時使用。

　　而且，這四個元素，都是相對於擁有相對定位（relative）屬性的父元素進行移動的。若是父元素沒有相對定位，那麼絕對定位就是相對於body進行定位的。

　　因此，爲了避免讓本身設置的元素跑飛了，那就記得給父元素設置relative吧。

　　四、fixed（固定定位）

　　這個定位是相對於瀏覽器窗口進行的定位，移動方法跟相對和絕對定位同樣的。

　　它也會脫離文案流，咱們常見的側邊欄或者廣告圖就是用這個功能實現的。很實用，很強大的功能。

　　五、inherit（繼承定位），就是從父元素繼承position定位屬性，不怎麼經常使用。

　　講到這裏，咱們就涉及到一個z-index (層級)的問題。剛纔咱們講過，若是給子元素所有設置了absolute，那麼全部的子元素就會堆疊在一塊兒，互相遮蓋。

　　若是咱們須要在一個元素上堆疊好多層，那怎麼給它們排序呢。這就須要用到z-index屬性了。

　　z-index屬性的屬性值是數字。數字越大，那麼它就顯示的最考上，好比說吧，

　　z-index=0 的元素就會再 z-index=1的下面顯示，z-index=10會再z-index=8上面顯示，因此，堆疊它們的顯示順序，設置z-index就能夠了。

　　固然，若是不設置z-index的話，默認的，後面的元素會遮蓋前面的元素。