开发手册HTMLCSSJavaScript
HTML手册CSS手册CSSCSS 教程CSS 简介CSS 基础语法CSS 高级语法CSS 派生选择器CSS id 选择器CSS 类选择器CSS 属性选择器CSS 创建CSS 背景CSS 文本CSS 字体CSS 链接CSS 列表CSS 表格CSS 轮廓CSS 框模型概述CSS 内边距CSS 边框CSS 外边距CSS 外边距合并CSS 定位概述CSS 相对定位CSS 绝对定位CSS 浮动CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代选择器CSS 子元素选择器CSS 相邻兄弟选择器CSS 伪类CSS 伪元素CSS 对齐CSS 尺寸CSS 分类CSS 导航栏CSS 图片库CSS 图片透明CSS 媒介类型CSS 注意事项CSS 总结CSS 实例CSS 参考手册CSS 选择器CSS 听觉参考手册CSS 网络安全字体CSS 单位CSS 颜色CSS 颜色值CSS 颜色名CSS 颜色十六进制CSS3CSS相关JavaScript手册

CSS 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示:

CSS 相对定位实例

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

CSS 相对定位实例

定位:相对定位
本例演示如何相对于一个元素的正常位置来对其定位。
关于千图| 赞助千图 |千图首页   Copyright2014千图网   沪ICP备10011451号-6   用时:0.0237秒

千图网提示