三种基本的定位机制: 普通流、浮动、定位。前面两个之前已经讲过，详见博客：

1、

怎么做比较好呢，如果你要粗暴那就直接ps在图片上添加标签。只是这样有个很大的弊端，比如你要添加新标签你需要重现修图，比如商品之前包邮后面不包邮了，

那你又需要重新p图。这样肯定是不合适的。那怎么做比较合适？

其实很简单，将商品图片和标签的标签分开来。然后通过css在商品图片上添加标签。这个时候通常会定位去完成。

2、切换Banner

有些商城的首页都会有个Banner，这里 左右的箭头 和 下面的小点点一般也是用定位来做。

3、广告位窗口

有些位置在左右侧会有固定的广告窗口，不论怎么滑动页面这个广告窗口都是在固定位置

这个就需要用到固定定位了。

 

二、定位概念

1、定位的分类

在CSS中，position 属性用于定义元素的定位模式，其基本语法格式如下：

选择器 {position:属性值;}

属性值

这里还有个概念就是 边偏移 因为你定位肯定要指定定位在哪里，所以需要通过 边偏移 来指定。

所以定位是要和边偏移搭配使用的。不过对于static(静态定位)设置边偏移是无用的。

2、静态定位(static)

static 是此属性的默认值。这时候，我们称那个元素没有被定位。简单来说就是网页中所有元素都默认的是静态定位。 其实就是标准流的特性。

所以如果需要使用定位那这里就不能是这个默认值了。

注意 在静态定位状态下，此时 top, right, bottom, left 和 z-index 属性无效。

3、相对定位(relative)

它的主要特点如下

1、 参照元素原来的位置进行移动。 2、 通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。 3、 元素原有的空间位保留。 4、 元素在移动时会盖住其他元素。

举例说明