固定定位是相当于“当前窗口”来进行的定位。
固定定位元素不再占空间，层级要高于普通元素，跟“浮动”很像。
固定定位元素，是一个“块元素”，换句话说，行内元素使用fixed定位，将转成“块元素”。
如果只指定了fixed定位属性，并没有设置偏移量，则“原地不动”。
绝对定位absolute
绝对定位元素，相对于“祖先定位元素”进行的定位。
如果父元素没有定位属性的话，则再往上找父定位元素，如果一直找到<body>元素，都没有找定位元素的话，则最终就相对于body来定位。
如果父元素是定位元素(相对或绝对)的话，那么绝对定位元素，就相对于该父元素进行定位。
绝对定位元素，不再占空间，层级要高于普通元素。
绝对定位元素，是一个“块元素”。
如果只指定absolute定位，并没有设置偏移量，则元素的位置不会改变(原地不动)。
由于广告的滥用，使得一些浏览器软件都开始有了广告内容拦截，使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。
虽然原来的浏览器并不支持过个属性，但是浏览器的发展使得现在的高级浏览器都可以正确的解析这个CSS属性。并且通过CSS HACK来让IE6都可以实现这样的效果（目前无法使IE5.x）实现这种效果。
CSS元素绝对定位、相对定位 布局和浮动等
1. position:static|无定位
position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位
example:
#div-1 {
position:static
}
2. position:relative|相对定位
使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。
如果要让div-1层向下移动20px,左移40px:
example:
#div-1 {
position:relative
top:20px
left:40px
}
如果用到相对定位，紧随他的层divafter是不会出现在div-1的下方，而是和div-1在同一个高度出现。
可见， position:relative并不是很好用。
3. position:absolute|绝对定位
使用position:absolute,能够很准确的将元素移动到你想要的位置，
让我将 div-1a 移动到页面的右上角:
example:
#div-1a {
position:absolute
top:0
right:0
width:200px
}
使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。所以position:absolute用于将一个元素放到固定的位置很好用，但是如果需要div-1a层相对于附近的层来确定位置就不要实现了。
*这里有个Win IE的bug需要提到，就是如果为绝对定位的元素定义一个相对的宽度，那么在IE下它的宽度取决于父元素的宽度而不是整个页面的宽度。
4. position:relative + position:absolute|绝对定位+相对定位
如果给父元素(div-1)定义为position:relative子元素(div-1a)定义为position:absolute，那么子元素(div-1a)的位置将相对于父元素(div-1)，而不是整个页面。
让div-1a定位于div-1的右上角：
example:
<div id=div-1>
<div id=div-1a>
this is div-1a element.
</div>
this is div-1 element.
</div>
#div-1 {
position:relative
}
#div-1a {
position:absolute
top:0
right:0
width:200px
}
5. two column layout|两列布局
让我们实践position:relative + position:absolute的理论，实现两列布局。
example:
<div id=div-1>
<div id=div-1a>this is the column-one</div>
<div id=div-1b>this is the column-two</div>
</div>
#div-1 {
position:relative/*父元素相对定位*/
}
#div-1a {
position:absolute/*子元素绝对定位*/
top:0
right:0
width:200px
}
#div-1b {
position:absolute/*子元素绝对定位*/
top:0
left:0
width:200px
}
注意，在这个例子中会发现父元素的高度不会随着子元素的高度变化，所以如果父元素的背景和边框需要定义一个足够高的高度才能显示出来。
6.float|浮动对齐
使用float定位一个元素有float:left&float:right两种值。这种定位只能在水平坐标定位，不能在垂直坐标定位。而且让下面的元素浮动环绕在它的左边或者右边。
example:
#div-1a {
float:left
width:200px
}
7.make two clumn with float|浮动实现两列布局
如果让一个元素float:left另一个float:right控制好他们的宽度，就能实现两列的布局效果。
example:
#div-1a {
float:left
width:150px
}
#div-1b {
float:left
width:150px
}
8.clear float|清除浮动
如果你不想让使用了float元素的下面的元素浮动环绕在它的周围，那么你就使用clear,clear有三个值，clear:left(清除左浮动)，clear:right(清除右浮动)，clear:both(清除所有浮动)。
example:
<div id=div-1a>this is div-1a</div>
<div id=div-1b>this is div-1b</div>
<div id=div-1c>this is div-1c</div>
#div-1a {
float:left
width:190px
}
#div-1b {
float:left
width:190px
}
#div-1c {
clear:both
}
至此，这个css的定位部分就结束了，你可以动手体会体会加深印象。
要css 底部固定需要两部分代码：html代码、css代码
1、html代码：
<body>
<div class='header'></div>
<div class='container'></div>
<div class='footer'></div>
</body>
2、css代码：
.container{ padding-bottom:30px/*需要 >= footer的height值*/}
.footer{ height:30pxposition:fixed bottom:0px z-index:-1}
扩展资料：
HTML代码使用规范问题：
1、格式问题
在代码视图中编写代码，一定要规范的格式，不要把代码全部都写到一块，这样不仅影响效率，更加影响视觉，当出现问题的时候往往很难找到原因所在，比如，我在编写HTML标签的时候总是每个标签都顶格写，结果今天在实验的时候，出现了错误，自己看着自己的代码找问题都想着急，最后根据嵌套的层数找到了原因，缺少了结束标签 导致的严重错误，所以谨记要把代码格式写规范；
2、布局问题：
在设计网页时，应该首先构造好网页的整个框架，然后对每个框架逐一进行完善，这样当那个部分出现问题的时候，我们就可以单独找到那个模块进行修改，例如我们刚刚学到的div+css这一部分的时候，应该先创建一个总的容器，然后在容器中逐一添加登录、导航、广告展示、主要内容、版权信息等各个模块，设置好各自的css样式，然后 再进行进一步的细化。
在这样的设计中，如果不先设计好总的结构，div的位置就会错乱，那样就不能很清晰地找到发生状况的原因。
3、输入问题：
一定要正确输入标签。输入标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无法正确地显示信息。各种符号一定要在英文状态下输入，否则不会 显示正确的效果。源代码不区分大小写。
4、属性设置问题：
相应的标签对应着自己的属性，因为各个标签对应的属性实在是太多了，很容易混淆，如果我们想给某个标签内的内容设置相应的属性，我们必须在该标签内找到相应的 属性方法进行设置，比如将<table>的宽度设置为700、边框宽度设置为1、单元格间距为0,相应的代码设置是：<table width="700" border="1" cellspacing="0" >；
5、引用问题：
当我们在外部设置了css样式，并且要引用这个样式表时，我们必须要在<head></head>标签内添加<link>标签，如外部样式表为style.css，那么我们需要在head标签中添加的是<link href="css/style.css" rel="stylesheet" type="text/css"/>,首先href是引入样式的地址必不可少，rel定义了文档与链接的关系，stylesheet是定义一个外部加载样式表。
参考资料：百度百科——HTML代码
