ss中元素的定位

復雜的網頁布局都是通過各種網頁元素靈活定位實現的，網頁中的各種元素定位都有自己的特點。今天為大家聊一下css中常用的三種定位方法。這里說的定位不是table排版的，而是通過DIV+CSS的方法對頁面中的塊元素的定位。

float定位

float定位是css排版非常重要的手段，新手一定要多多練習熟練掌握。float定位屬性值有三種left、right和默認值none。設置了元素向左（left）或者向右（right）浮動時，元素會向父元素的坐車或者右側靠近。可以靈活運用浮動實現復雜的排版效果比如說“文字環繞”和“八仙過海”。另外可以使用clear:both屬性消除上面對下面的排版影響。下圖是一段簡單的CSS+DIV代碼，A是B、C和D的父元素，B元素使用了左float定位，C元素使用了有float定位，D元素使用了clear:both清除浮動影響。

position定位

position定位于float一樣，也是css排版中經常用到的，從字面上理解就是指定塊元素的位置，它是相對于父元素的位置和相對其他自身應該在的位置。position有static、absolute、inherit、relative和fixed五個值。static是默認值，它表示元素保持在原來的位置上，沒有任何移動效果。absolute：它表示元素生成絕對定位，可以設置top、right、bottom、left四個值來調整元素的位置。relative：它表示生成相對定位的元素，相對于其正常位置進行定位。fixed：它表示生成絕對定位的元素，相對于瀏覽器窗口進行定位，也可以設置top、right、bottom、left四個值來調整元素的位置。inherit：規定從父元素繼承 position 屬性的值。需要注意的是IE瀏覽器不支持position定位的inherit屬性。下圖是一段簡單的absolute定位代碼。

z-index空間位置

z-index屬性用于調整定位是重疊快的上下位置，你可以想象為x-y軸，垂直于頁面為z軸，z-index值越大他的位置就越往上。z-index值為整數，可以是負數，元素設置了position出現重疊時，為了保證排班效果，需要設置它們的z-index屬性值。默認的z-index屬性值是0，兩個元素z-index都一樣將保持原來的空間位置不變。

關于css中的元素定位到這，如果你是大神可以忽略這篇文章，每天學習一個知識點，每日寄語-“成功源于不懈的努力。”

SS是樣式,DIV是層.DIV+CSS是網站標準（web標準），通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別.因為XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。

1：學會HTML語言，再學習DIV+CSS時會得心應手。

看得懂HTML語法，那么世界上80%的網站都能被你看穿。HTML語言很好學，一定要熟記常用的一些代碼，因為有了像dreamweaver這樣的幫助生成html代碼的工具,所以很多人都忽略了HTML的學習.學會了HTML互聯網中最基本的語言之后，在學習DIV+CSS時，你會發現：原來DIV+CSS也就那樣，小菜一碟。現在都是用Notepad++、Sublime等，我這篇文章主要寫的用Dw。

2.使用Dreamweaver的代碼模式來編寫DIV和CSS。

對于網頁設計初學者來說，直接使用記事本、Notepad等工具來書寫代碼很困難。因為Dreamweaver的代碼模式有提示功能，可以在保證語法編寫的正確性。并且對不熟悉的語法可以一次性書寫正確。

如圖所示：書寫div，html時DW的提供功能。

書寫CSS時DW工具欄右側的CSS可視化編輯功能.

我學習DIV+CSS時就是從Dreamweaver的代碼模式學起的，也許不是最好，但很實用。

3.養成良好的書寫習慣.

有良好的生活習慣，說明這人會過日子，有良好的CSS書寫習慣，說明這人做事嚴謹。寫css的時候網上有很多推薦的規范，比如菜單類用menu，版權用copyright（CoryRight），底部用footer等等，在書寫順序上一般是：顯示屬性-自身屬性-文本屬性。當然這些都沒有硬性的規定，但是遵循一些不成文的規定不是壞事，這樣讓自己寫的代碼，容易讓別人讀懂，搜索引擎也更加喜歡。

4.只有目的明確，結果清晰，過程才最高效，才不會輕易被干擾，被改變方向。