一條從前端菜鳥到大神的進(jìn)化史：Day1
今天學(xué)習(xí)了position,position是絕對定位的意思，一般語法為，position：absolute
absolute:指脫離原來位置進(jìn)行定位
relatitve:指保留原來位置進(jìn)行定位。
通過以下例子快速了解position；
（1）創(chuàng)建三個(gè)不同尺寸的盒子，div class="wrapper",div class="content",div class="box",并賦予不同樣式。具體代碼如下：
接下來我讓第二個(gè)黑盒子帶著黃色的小盒子左移，只需要在content樣式中加入margin -left:100px;
如果我想讓黃色盒子移動(dòng)一樣是在wrapper下加入margin-left,以上是relative的用法。
接下來我們討論absolute
我在第三個(gè)黃色小盒子里加入position:absolute;并讓它左移50個(gè)像素，
很明顯的看到，黃色小盒子脫離了以前的位置，
現(xiàn)在我們給其祖父級加上relative
看見黃色的小盒子以橙色大盒子為參考點(diǎn)左移50像素。
總結(jié)如下：
absolute相對于父級定位，離自己最近的，如果沒有就相對于文檔定位
relative保留原來的位置進(jìn)行定位，相對于自己原來的位置進(jìn)行定位。
定位一般都需要參考物，一般情況下，我們都用relative作為參考的父級，不用他去定位!
接下來完成了一個(gè)奧運(yùn)五環(huán)的編寫，代碼如下：
? ?
? ?
? ?
? ? Document
? ?
? ? ? ? *{padding: 0;
? ? ? ? margin: 0}
.zhong{
? ? width: 400px;
? ? margin: 0 auto;
? ? height: 300px;
? ? overflow: hidden;
? ? position: relative;
}
? ? ? ? .yuan1{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;?
? ? ? ? ? ? border: 8px solid blue;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10px;
? ? ? ? ? ? left: 10px;
? ? ? ? }
? ? ? ? .yuan2{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;?
? ? ? ? ? ? border: 8px solid red;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? float: left;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10px;
? ? ? ? ? ? left: 126px;
? ? ? ? }
? ? ? ? .yuan3{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;?
? ? ? ? ? ? border: 8px solid black;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? float: left;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10px;
? ? ? ? ? ? left: 242px;
? ? ? ? }
? ? ? ? .yuan4{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;?
? ? ? ? ? ? border: 8px solid yellow;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 83px;
? ? ? ? ? ? left: 73px;
? ? ? ? }
? ? ? ? .yuan5{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;?
? ? ? ? ? ? border: 8px solid green;
? ? ? ? ? ? border-radius: 50%;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 83px;
? ? ? ? ? ? left: 188px;
? ? ? ? }
? ?
? ? ? ?
? ? ? ?
? ? ? ?結(jié)果如下：
? ? ? ?我大哥說我寫出來小心被噴，這么low,但是沒關(guān)系呀，我希望能學(xué)到更多的東西，第一次寫，有點(diǎn)凌亂，多多包涵。
? ? ? ?
