码农教程 - 一技在手,衣食无忧! tools

目录

CSS 布局 - 位置属性

❮ 上一节 下一节 ❯

这个position属性指定用于元素的定位方法的类型（静态、相对、固定、绝对或粘性）。

职位属性

这个position属性指定用于元素的定位方法的类型。

有五种不同的位置值：

  • static
  • relative
  • fixed
  • absolute
  • sticky

然后使用 top、bottom、left 和 right 属性来定位元素。然而，这些属性将不起作用，除非position首先设置属性。根据位置值的不同，它们的工作方式也有所不同。

位置：静态；

HTML 元素默认定位为静态。

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

一个元素与position: static;没有以任何特殊方式定位；它始终根据页面的正常流程定位：

这个 <div> 元素的位置：static；

这是使用的 CSS：

示例

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

位置：相对；

一个元素与position: relative;相对于其正常位置定位。

设置相对定位元素的 top、right、bottom 和 left 属性将导致其调整远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

这个 <div> 元素的位置：relative;

这是使用的 CSS：

示例

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

位置：固定；

一个元素与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;相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

然而;如果绝对定位的元素没有定位的祖先，则它使用文档主体，并随着页面滚动而移动。

笔记：绝对定位的元素会从正常流中移除，并且可以与元素重叠。

这是一个简单的例子：

这个 <div> 元素的位置：relative;
这个 <div> 元素的位置：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;根据用户的滚动位置定位。

粘性元素在之间切换relative和fixed，取决于滚动位置。它是相对定位的，直到在视口中满足给定的偏移位置 - 然后它"sticks"就位（如position:fixed）。

笔记：Internet Explorer 不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见下面的示例）。您还必须至少指定以下一项top,right,bottom或者left以便粘性定位发挥作用。

在此示例中，粘性元素粘在页面顶部（top: 0），当您到达其滚动位置时。

示例

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

在图片中定位文本

如何将文本放置在图片上：

示例

Cinque Terre
Bottom Left
Top Left
Top Right
Bottom Right
Centered

亲自试一试:

左上方 » 右上 » 左下方 » 右下角 » 居中 »

更多示例

设置元素的形状
此示例演示如何设置元素的形状。该元素被剪裁成该形状并显示。

通过练习测试一下

练习:

将 <h1> 元素定位为始终距离顶部 50 像素，距离右侧 10 像素（相对于窗口/框架边缘）。

<style>
h1 {
  : ;
  : 50px;
  : 10px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

开始练习

所有 CSS 定位属性

Property Description
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box

❮ 上一节 下一节 ❯