CSS是网页设计中必不可少的一个元素，它的四种定位方式非常重要，可以让我们在布局和排版中更加自由和灵活。

第一种定位方式是静态定位（static）。这种定位方式是默认的，元素没有任何特殊的定位，按照正常文档流排列。这种定位方式在大多数情况下都是不会用到的。代码如下：

  p {
    position: static;
  }

第二种定位方式是相对定位（relative）。这种定位方式是相对于元素本来应该在的位置进行移动，而不会影响其他元素的布局。可以通过top、right、bottom、left四个属性来控制元素的位置。代码如下：

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

第三种定位方式是绝对定位（absolute）。这种定位方式是相对于父级元素进行定位，如果没有父级元素，则相对于body定位，可以通过top、right、bottom、left四个属性来控制元素的位置。这种定位方式会使元素脱离正常文档流，可能会影响其他元素的布局。代码如下：

  .box {
    position: relative;
  }
  p {
    position: absolute;
    left: 20px;
    top: 10px;
  }

第四种定位方式是固定定位（fixed）。这种定位方式可以使元素相对于浏览器窗口进行定位，不随滚动而移动。可以通过top、right、bottom、left四个属性来控制元素的位置。代码如下：

  p {
    position: fixed;
    right: 30px;
    top: 50px;
  }

CSS的四种定位方式可以根据不同的需求进行选择，合理使用定位可以让网页的布局更加灵活和美观。