定位 div css 代码示例

温馨提示：这篇文章已超过271天没有更新，请注意相关的内容是否还可用！

定位 div 是指通过 CSS 代码来确定一个 div 元素在网页中的位置和布局。在 CSS 中，有多种方式可以实现定位 div，常用的有相对定位、绝对定位和固定定位。

1. 相对定位：相对定位是相对于元素在正常文档流中的位置进行定位。使用相对定位时，可以通过 top、bottom、left、right 属性来调整元素的位置。示例代码如下：


div {
  position: relative;
  top: 20px;
  left: 50px;
}

2. 绝对定位：绝对定位是相对于最近的非静态定位的父元素进行定位。如果没有找到非静态定位的父元素，则相对于浏览器窗口进行定位。使用绝对定位时，可以通过 top、bottom、left、right 属性来调整元素的位置。示例代码如下：


div {
  position: absolute;
  top: 100px;
  left: 200px;
}

3. 固定定位：固定定位是相对于浏览器窗口进行定位，无论滚动条如何滚动，元素的位置都不会改变。使用固定定位时，可以通过 top、bottom、left、right 属性来调整元素的位置。示例代码如下：


div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

通过以上示例代码，我们可以看到不同定位方式的效果。相对定位会相对于元素在正常文档流中的位置进行偏移，绝对定位会相对于最近的非静态定位的父元素进行偏移，而固定定位则相对于浏览器窗口进行偏移。根据需要选择合适的定位方式可以实现精确的布局效果。