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.只有目的明确，结果清晰，过程才最高效，才不会轻易被干扰，被改变方向。