CSS學習之定位

CSS相對定位

       設置爲相對定位(relative)的元素會偏移某個距離，元素仍保持其未定位前的形狀，他本來所佔的空間仍然保留

      相對定位是一個很是容易掌握的概念，若是對一個元素進行相對定位，它將出如今它所在的位置上 ，而後能夠經過設置垂直或者水平位置讓這個元素相對於它的起點進行移動。若是將top 設置爲20px， 那麼框的位置就在頂部下方20px的地方，若是 left 設置爲 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

注意，在使用相對定位時，不管是否進行移動，元素仍然佔據原來的空間。所以，移動元素會致使它覆蓋其它框。

---

CSS絕對定位

      設置爲絕對定位的元素框從文檔中徹底刪除，並相對於其包含塊定位。包含塊多是文檔中另外一個元素或者初始包含塊，元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來的位置不存在同樣，元素定位後生成一個塊級框而不論原來他在正常流中生成何種類型的框。

      絕對定位使元素的位置與文檔流無關，所以不佔據空間，這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。普通流中其它元素的佈局就像絕對定位的元素不存在同樣：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

總結：

在CSS中一共有N種定位方式，其中，static ,relative,absolute三種方式是最基本最經常使用的三種定位方式。他們的基
本介紹以下。
　　static默認定位方式
　　relative相對定位，相對於原來的位置，可是原來的位置仍然保留
　　absolute定位，相對於最近的非標準劉定位，原來的位置消失，被後邊的位置所頂替

        一般狀況下，咱們元素的position屬性的值默認爲static 就是沒有定位，元素出如今正常的文檔流中，這個時候你給這個元素設置的left,right,bottom,top這些偏移屬性都是沒有效果的，不會生效，好比你設置一個距離左邊距偏移100px的聲明：left:100px 那麼這條聲明不會起到任何效果，還有z-index屬性在這時也不會生效，也就是說咱們平時若是不給某元素一個position屬性的聲明，那麼它默認的就是我上述的這種狀況，不過由於有了浮動，因此一般狀況下咱們還真不須要給元素設置position屬性
        可是某些特殊的狀況下，咱們不得不用到position屬性，那咱們今天就講講position屬性的relative和absolute值
首先說relative ，相對定位。
怎麼理解呢？若是說我對某元素設置了相對定位，那麼首先這個元素他會跟其它的元素同樣，出如今文檔流中它該出現的位置，而後，咱們能夠設置它的水平或垂直偏移量，讓這個元素相對於它在文檔流中的位置的起始點進行移動。有一點要注意， 在使用相對定位時，就算元素被偏移了，可是他仍然佔據着它沒偏移前的空間。這裏值得注意的一點是：偏移可不是邊距，跟邊距是不同的。

 咱們先看看下圖：

上圖中有三個浮動的塊，第二個塊是設置了相對定位position:relative了的，這時你們看到它的位置並無其它什麼不一樣，跟其它兩個塊同樣都處在正常的文檔流中。
接下來我給那個設置了position:relative的塊設置一個偏移：left:50px ; top:30px 這時咱們再看看效果：

        這時咱們發現第二個塊針對它自己位置的起始點進行了一個偏移，可是它原來所佔據的那個位置空間依然還在(虛線框標示的地方)，即便咱們把偏移量設置得再大一點，使它徹底離開原來的位置，它原來位於文檔流中的位置仍然會存在，不會被第三個塊浮動過來填補掉。同時，它的偏移也不會把別的塊從文檔流中原來的位置擠開，若是有重疊的地方它會重疊在其它文檔流元素之上，而不是把它們擠開，就像圖中那樣，它已經覆蓋在了第三個塊之上。
咱們能夠設置它的z-index屬性來調整它的堆疊順序。

接下來咱們來看看絕對定位：position:absolute

        被設置了絕對定位的元素，在文檔流中是不佔據空間的，若是某元素設置了絕對定位，那麼它在文檔流中的位置會被刪除，那這個元素到哪去了呢？它浮了起來，其實設置了相對定位relative時也會讓該 元素浮起來，但它們的不一樣點在於，相對對定位不會刪除它自己在文檔流中佔據的那塊空間，而絕對定位則會刪除掉該元素在文檔流中的位置，徹底從文檔流中抽了出來，咱們能夠經過z-index來設置它們的堆疊順序 。
        那麼絕對定位是如何定位的呢？首先，若是它的父元素設置了除static以外的定位，好比position:relative,或者position:absolute以及position:fixed，那麼它就會相對於它的父元素來定位，位置經過left , top ,right ,bottom屬性來規定，若是它的父元素沒有設置定位，那麼就得看它父元素的父元素是否有設置定位 ，若是仍是沒有就繼續向更高層的祖先元素類推，總之它的定位就是相對於設置了除static定位以外的定位（好比position:relative）的第一個祖先元素，若是全部的祖先元素都沒有以上三種定位中的其中一種定位，那麼它就會相對於文檔body來定位（並不是窗口,相對於窗口定位的是fixed），絕對定位的元素相對於誰來定位，咱們就把這個"誰"叫着參照物，咱們結合上面的講解來看看下圖就明白了 ：

咱們看一下在瀏覽器裏的效果，咱們先看看沒有使用絕對定位時的樣子：

而後咱們給第二個塊設置絕對定位：position:absolute 而後再設置一個偏移：left:150px;top:40px; 這時就變成了下圖所示：

還有一點就是：在設置偏移量的時候，咱們能夠設置負值。

 

轉自：https://www.cnblogs.com/huanying2000/p/6187614.html