css定位方式有哪几种

css定位方式有5种：1、浮动定位（float）。2、static（静态定位）；没有定位，元素出现在正常的流中。3、relative（相对定位）；元素脱离正常的文档流。4、absolute（绝对定位）。5、fixed（固定定位）。

本教程操作环境：windows7系统、CSS3版、Dell G3电脑。

复杂的网页布局都是通过各种网页元素灵活定位实现的，网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。

float定位（即浮动定位）：

这种定位方式很简单，只需规定一个浮动的方向（如：float:left;就表示这个元素向左边摆放），它的定位是相对于父元素容器；

如果该元素设置了浮动，后面紧邻的则会受到浮动的影响，因此需要后面的元素若要不受影响，则要在后面清除浮动（可用clear:both;等方法），在两个相邻元素设置相同浮动的情况下，两元素将按顺序相邻摆放。这种定位使得元素脱离文档流。

立即学习“前端免费学习笔记（深入）”；

position定位：

position定位是指定位置的定位，以下为常用的几种：

1、static（静态定位）：

当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

2、relative定位（相对定位）：

该定位是一种相对的定位，可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移，这种定位不脱离文档流；

3、absolute定位（绝对定位）：

这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

4、fixed（固定定位）：

这种定位方式是相对于整个文档的，只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

（学习视频分享：css视频教程）

以上就是css定位方式有哪几种的详细内容，更多请关注php中文网其它相关文章！