CSS关于相对定位和绝对定位的说明实例

下面是关于CSS相对定位和绝对定位的详细攻略。

相对定位

相对定位是指元素的定位相对于其原本的位置，通过指定元素的相对定位属性，可以把元素在其原本位置上移动一定的距离。

相关CSS属性

相对定位需要使用以下CSS属性：

• position：相对定位需要设置为relative；
• top：定义从元素的顶端开始向下偏移的距离；
• bottom：定义从元素的底部开始向上偏移的距离；
• left：定义从元素的左侧开始向右偏移的距离；
• right：定义从元素的右侧开始向左偏移的距离。

示例说明

以下是两个关于相对定位的示例说明：

1. 在网页中，有一张图片需要上移一定的距离，可以给这个图片添加如下的CSS样式：

img {
  position: relative;
  top: -20px;
}

上述代码中，给图片定义了相对定位，并将其向上移动了20px。

1. 在一个网页中，有一个文本框需要向下移动5px，并向右移动10px，可以给这个文本框添加如下的CSS样式：

input[type="text"] {
  position: relative;
  top: 5px;
  left: 10px;
}

上述代码中，给文本框定义了相对定位，并将其向下移动了5px，向右移动了10px。

绝对定位

绝对定位是指元素的定位相对于其最近的已定位的祖先元素，如果该元素没有已定位的祖先元素，则相对于body元素，通过指定元素的绝对定位属性，可以将元素放置在任意位置。

相关CSS属性

绝对定位需要使用以下CSS属性：

• position：绝对定位需要设置为absolute；
• top：定义从元素顶端开始向下偏移的距离；
• bottom：定义从元素底部开始向上偏移的距离；
• left：定义从元素左侧开始向右偏移的距离；
• right：定义从元素右侧开始向左偏移的距离。

值得注意的是，如果该元素没有已定位的祖先元素，则上述四个属性的参考值为body元素。此外，还可以使用z-index属性控制元素的前后顺序。

示例说明

以下是两个关于绝对定位的示例说明：

1. 在一个网页中，有一个导航栏需要放在页面左上角，可以给这个导航栏添加如下的CSS样式：

.navbar {
  position: absolute;
  top: 0;
  left: 0;
}

上述代码中，给导航栏定义了绝对定位，并将其放置在页面的左上角。

1. 在一个网页中，有一个弹出框需要放置在页面中央，可以给这个弹出框添加如下的CSS样式：

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

上述代码中，给弹出框定义了绝对定位，并将其放置在页面的中央。其中，使用transform属性，将其向左偏移了50%宽度，向上偏移了50%高度，使其在页面正中间居中显示。

以上是CSS关于相对定位和绝对定位的说明和示例，相信您已经掌握了这两种定位的使用方法。