CSS 教程

CSS 教程 CSS 简介 CSS 语法 CSS 选择器 CSS 如何使用 CSS 注释 CSS 颜色 CSS 背景 CSS 边框 CSS 外边距 CSS 内边距 CSS 高度/宽度 CSS Box 模型 CSS 轮廓 CSS 文本 CSS 字体 CSS 图标 CSS 链接 CSS 列表 CSS 表格 CSS Display CSS Max-width CSS 定位 CSS 溢出 CSS 浮动 CSS Inline-block CSS 对齐 CSS 组合器 CSS 伪类 CSS 伪元素 CSS 不透明度 CSS 导航栏 CSS 下拉菜单 CSS 图片库 CSS 图像拼合技术 CSS 属性选择器 CSS 表单 CSS 计数器 CSS 网站布局 CSS 单位 CSS 特异性

CSS3 高级教程

CSS3 高级教程 CSS3 简介 CSS3 圆角 CSS3 边框图像 CSS3 多重背景 CSS3 颜色 CSS3 渐变 CSS3 阴影 CSS3 文本效果 CSS3 网络字体 CSS3 2D 转换 CSS3 3D 转换 CSS3 过渡 CSS3 动画 CSS3 提示框 CSS3 样式图像 CSS3 object-fit CSS3 按钮 CSS3 分页 CSS3 多列 CSS3 用户界面 CSS3 变量 CSS3 盒子大小 CSS3 媒体查询 CSS3 媒体查询实例 CSS3 弹性盒子

CSS 响应式

RWD 简介 RWD 视口 RWD 网格视图 RWD 媒体查询 RWD 图像 RWD 视频 RWD 框架 RWD 模板

CSS 网格视图

Grid 网络简介 Grid 网格容器 Grid 网格项目

CSS 实例

CSS 模板 CSS 实例 CSS 测验 CSS 练习

CSS 参考手册

CSS 参考手册 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 网络安全字体 CSS 动画相关属性 CSS 单位 CSS PX-EM 单位转换 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体 CSS 听觉


CSS 布局 - 定位属性

position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)。


position 属性

position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是,除非首先设置了 position 属性,否则这些属性将不起作用。根据不同的 position 值,它们的工作方式也不同。


position: static;

HTML 元素默认情况下的定位方式为 static(静态)。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位:

这个 <div> 元素设置了 position: static;

这是所用的 CSS:

实例

div.static {
  position: static;
  border: 3px solid #73AD21;
}
亲自试一试 »

position: relative;

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

这个 <div> 元素设置了 position: relative;

这是所用的 CSS:

实例

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
亲自试一试 »


position: fixed;

position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

请注意页面右下角的这个固定元素。这是所用的 CSS:

实例

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
亲自试一试 »
这个 <div> 元素设置了 position: fixed;

position: absolute;

position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。

然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。

注释: "被定位的"元素是其位置除 static 以外的任何元素。

这是一个简单的例子:

这个 <div> 元素设置了 position: relative;
这个 <div> 元素设置了 position: absolute;

这是所用的 CSS:

实例

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
亲自试一试 »

position: sticky;

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其"粘贴"在适当的位置(比如 position:fixed)。

注意: Internet Explorer、Edge 15 以及更早的版本不支持粘性定位。 Safari 需要 -webkit- 前缀(请参见下面的实例)。您还必须至少指定 toprightbottomleft 之一,以便粘性定位起作用。

在此例中,在到达其滚动位置时,sticky 元素将停留在页面顶部(top: 0)。

实例

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}
亲自试一试 »

重叠元素

在对元素进行定位时,它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。

元素可以设置正或负的堆叠顺序:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

实例

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
亲自试一试 »

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注释: 如果两个定位的元素重叠而未指定 z-index,则位于 HTML 代码中最后的元素将显示在顶部。


定位图像中的文本

如何在图片上放置文字:

实例

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

在线实例:

Top Left » Top Right » Bottom Left » Bottom Right » Centered »

更多实例

设置元素的形状
本例演示如何设置元素的形状。元素被裁剪为这种形状并显示。



所有 CSS 定位属性

属性 描述
bottom 设置定位框的底部外边距边缘。
clip 剪裁绝对定位的元素。
left 设置定位框的左侧外边距边缘。
position 规定元素的定位类型。
right 设置定位框的右侧外边距边缘。
top 设置定位框的顶部外边距边缘。
z-index 设置元素的堆叠顺序。