[分享]css中定位一共有几种

CSS中定位是网页制作中非常重要的一部分，分为绝对定位、相对定位、固定定位和静态定位四种方式。首先，绝对定位使元素相对于包含块进行定位，而包含块是最近的已经定位的祖先元素。如果没有已定位的祖先元素，则...

CSS中定位是网页制作中非常重要的一部分，分为绝对定位、相对定位、固定定位和静态定位四种方式。
首先，绝对定位使元素相对于包含块进行定位，而包含块是最近的已经定位的祖先元素。如果没有已定位的祖先元素，则相对于最初的包含块即浏览器窗口进行定位。其代码如下：

p {
    position: absolute;
    top: 20px;
    left: 20px;
} 

其次，相对定位使元素相对于其元素在正常文档流中的位置进行定位，但不会影响其他元素的位置。其代码如下：

p {
    position: relative;
    top: 20px;
    left: 20px;
} 

固定定位使元素相对于视口进行定位，即不随滚动条滚动而变化。其代码如下：

p {
    position: fixed;
    top: 20px;
    left: 20px;
} 

最后，静态定位是默认的定位方式，在正常文档流中定位元素。当不需要使用定位属性时，通常使用静态定位。其代码如下：

p {
    position: static;
} 

以上四种定位方式是CSS中常用的方式，根据实际需求进行选择，以达到最优效果。