div+css详解定位与定位应用

什么是定位？

定位是CSS的一个重要概念，指的是元素在页面中的准确位置。网页制作离不开定位，可以通过定位实现各种效果，如盒子居中、导航菜单等。CSS有三种定位方式：

• 静态定位（position: static）：元素默认值就是静态定位，元素会根据文档流从上到下自动排列。
• 相对定位（position: relative）：相对定位指元素相对于自己原来的位置进行定位，元素在文档流中仍占据原来的位置。
• 绝对定位（position: absolute）：绝对定位下元素脱离文档流，它的位置相对于最近的具有定位的祖先元素，如果没有祖先元素，则相对于元素定位，相对位置通过left、right、top、bottom属性确定。

如何使用定位？

一般来说，定位要与盒子模型一起使用，比如下面这个示例：

   .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;  /* 相对定位 */
    }
   .content{
        width: 100px;
        height: 100px;
        border: 1px solid #f00;
        position: absolute;  /* 绝对定位 */
        top: 20px;
        left: 50px;
    }

这段代码定义了一个宽高为200px的盒子，以及宽高为100px的内容框。盒子使用相对定位，内容框使用绝对定位。top和left属性控制内容框相对于盒子原始位置偏移的距离。这个示例中，内容框相对原始位置向下偏移20px，向右偏移50px。

另外，还可以使用负值进行定位，比如下面这个示例：

   .box{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;  /* 相对定位 */
    }
   .content{
        width: 100px;
        height: 100px;
        border: 1px solid #f00;
        position: absolute;  /* 绝对定位 */
        top: -20px;
        left: -50px;
    }

这段代码与上一个示例类似，只是将top和left属性设置为负值，内容框向上偏移20px，向左偏移50px。

以上就是“div+CSS详解定位与定位应用”的完整攻略。