乙個元素，如何讓它擺在自己想要的位置。就需要弄透css的定位相關的屬性。
首先，乙個元素預設是按照文件流進行布局的，比如說三個div，它缺省會占用三行，三個span，它預設占用一行，當這一行不夠時，也會換行。這就是預設的文件流，每個元素根據自己的特性進行布局。有時候需要擺脫文件流，就需要特殊處理。現在開始了解css定位中的幾種方式。
第一種方式，絕對定位，也就是position:absolute;絕對定位的特性是：給定座標來決定元素的位置。座標是相對的，我說離客廳的左邊1公尺，離客廳的上邊1公尺，那麼這個位置在客廳裡面就定下來了。離臥室的右邊1公尺，離臥室的下邊一公尺，這個位置也定下來了，但問題是，誰是臥室和客廳。這根本上決定了元素的位置。那麼從**上來看。假設現在有三個div，都是巢狀的。即：
id="div1">
id="div2">
id="div3">div>
div>
div>
又假設id為div1的position為relative（後面有講），div2的position為預設的static，div3的position為absolute。那麼我說div3離左邊10px，離下邊10px，那到底說的是基於div2的左邊下邊還是基於div1的左邊下邊。這是乙個非常容易被忽略的地方，absolute是基於relative的父元素進行定位的。也就是div2。那麼預設情況下，position都是static的。但是body還是html元素是可以接受子元素進行絕對定位的，至於到底是body還是html元素沒研究過。因為要定位的元素發現父元素都是static定位的，那就只能根據body或者html來定位了。
ok，到這裡，知道了絕對定位，並且知道了絕對定位它的座標的根據。
第二種定位方式，相對定位。什麼叫相對定位，絕對定位裡面提到了過一點它的特性，設定為相對定位的元素下的子元素，如果使用絕對定位，那麼就是以它自己為基準進行絕對定位的。這是相對定位的一大特性，還有一點就是，相對定位的元素，也可以指定座標。比如說我站在客廳中間，我說要移動到我的左邊1公尺處，這就是相對自己定位，position:relative的元素通過指定座標，則是根據自己現在的位置，進行偏移。這種用法在開發過程中用的比較多。1）相對定位的元素下的子元素如果使用絕對定位，那麼絕對定位的座標就是相對自己而言的。
2）相對定位的元素如果指定座標，那麼是相對自己而言的。
第三種定位方式，固定定位。什麼叫做固定定位，當然可能不叫固定定位，名字我也忘記了。比如說，家裡有窗戶，我希望這個窗戶它總是固定在某一面牆上，跟裡面客廳的桌子擺在**，電視機擺在**都無關，窗戶一如既往的在那面牆，這就是固定。這就是position:fixed。它總是固定在body元素上（有可能是html元素，沒去研究）。也是通過指定座標來決定位置的，只不過這個座標總是根據body或者html元素而言的。固定定位就這一特性，沒什麼可說的，但是一定要理解它的這一特性。
ok，到這裡，知道了絕對定位，相對定位以及固定定位。實則還有一種定位，就是position:static，之前說過這是預設的定位方式。也就是隨波逐流的跟著文件流，乾脆就叫它文件流定位。
ok，到這裡，又知道元素預設的定位方式為static，表示文件流定位。那麼之前所說的絕對定位，相對定位和固定定位，都涉及到了座標。設定座標有4個屬性，分別表示上，下，左，右。即top,bottom,left,right。
id="div1" style="position:relative;border:1px solid red;width:500px;height:500px;">
id="div2">
id="div3" style="position:absolute;left:10px;top:20px;">
絕對定位的元素
div>
div>
div>
這個栗子，div3用了絕對定位，它說明的是離div1的左邊10px，上邊20px。
注意：這裡不是相對於div2，而是相對於div1，為什麼？因為div2沒有設定position:relative，那麼它是預設的static。而div1的position:relative，在絕對定位和相對定位中有提到相對定位的這一特性。
再舉個栗子：
type="text" style="position:relative;right:10px;bottom:10px;"/>ok，到這裡，已經知道了各種定位方式和關於座標的屬性。
思考一下，如果有很多個元素都被定位在同乙個位置，那麼到底顯示的是哪乙個？ok，這裡還有乙個屬性，叫做z-index。比如說現在有三個div定位在同乙個地方，你想要第乙個div顯示出來，那麼就把第乙個div的z-index設定為9，第二個第三個設定為8。這樣第乙個div就出來了，因為z-index要大一些。那麼z-index表示的是什麼？它表示的是三維情況下的z軸，z越大，就越在外面，所以就被顯示出來了。
WEB前端學習日誌Day4
樣式表的權重關係 1.內聯樣式表的權重最大！2.內部和外部樣式的權重，和書寫的前後順序有關！放在後面的會把放在前面的樣式覆蓋掉,覆蓋的只是相同屬性的樣式，不同屬性的樣式會繼續執行。舉例 在學校你的班主任對你說 明天你值日。你所在小組的組長說 明天你不需要值日。在兩者之間老師的權重大，座椅要聽從老師的...
前端學習Day4
一.css樣式表的權重 1.比喻 a.在公司 組長告訴你 本週加班7天。在公司 老闆告訴你 本週放假7天。有衝突b.在家 爺爺告訴你 抓緊娶媳婦 在家 爸爸告訴你 抓緊掙錢 有衝突c.老闆說 後天你休息 組長說 明天你工作 沒有衝突 2.樣式表的權重關係 a.內聯樣式表的權重最大。b.內部和外部樣式...
寒假前端學習day4
前幾天van遊戲惹。果然停一天就會導致停好幾天。下次還玩勇者海王星和向日葵教會qwq。表單form action填的是乙個伺服器啥啥的 method有post和get之分。成單標籤 屬性type number txt password url email txt 輸入文字，如賬號之類 number ...