1. CSS的position特点值:

  • static:默认值,元素在正常的文档流中,不会被特别定位。
  • relative:相对于元素在文档流中的初始方位进行定位的。
  • absolute:相对于最近的已定位(非static)先人元素定位。
  • fixed:相对于浏览器窗口定位,即便窗口翻滚,元素也会停留在指定方位。
  • sticky:基于翻滚方位在relativefixed定位之间切换。
定位方法 肯定定位 相对定位 固定定位 粘性定位 静态定位
定位原点 相对于最近的已定位先人元素 相对于元素自身在文档流中的方位 相对于浏览器窗口 相对于最近的定位上下文 元素在正常文档流中的方位
方位参阅 相对于已定位的先人元素 相对于元素自身原始方位 浏览器窗口 相对于最近的定位上下文 文档流中的方位
翻滚影响 跟着页面翻滚而移动 跟着页面翻滚而移动 固定在浏览器窗口某个方位 跟着页面翻滚而移动,翻滚到必定间隔则不翻滚 跟着页面翻滚而移动
元素方位调整 经过top、right、bottom、left特点 经过top、right、bottom、left特点 经过top、right、bottom、left特点 经过top、right、bottom、left特点 不行调整

2. 用于定位元素的特点:

  • top,right,bottom,left:这些特点用于指定元素相对于其包括块(通常是父元素)的方位。它们只对运用了相对定位、肯定定位、固定定位或粘性定位的元素有用。

  • z-index:指定元素的堆叠次序。数值越大,元素越靠上。具有更高z-index值的元素会显示在具有较低z-index值的元素上方。

3. 定位类型详解及示例:

1. 静态定位

默认的定位方法。元素按正常的文档流进行排列,不会因为定位特点而改变方位。此刻,toprightbottomleftz-index特点将不会有任何作用。

.static-box {
  position: static;
}

2. 相对定位

答应你根据元素自身的原始方位进行调整。它不会脱离文档流,但会让空间保留在原来的方位。

.relative-box {
  position: relative;
}

3. 肯定定位

元素脱离了文档流,其方位是相对于最近的定位先人确定的。假如没有定位先人,它将相对于文档的初始边界进行定位。

.absolute-box {
  position: absolute;
}

4. 固定定位

元素相对于视窗进行定位,因此翻滚页面时,它的方位不会改变。经过固定定位,可以创立固定在页面某个方位的元素,比如导航栏或悬浮广告。

.fixed-box {
  position: fixed;
}

5. 粘性定位

结合了相对和固定定位的特性。当页面翻滚到特定方位时,粘性元素会“粘住”视窗的某个方位。元素在跨过特定阈值前是相对定位的,之后变为固定定位。这种定位方法常用于创立翻滚时固定在页面顶部或底部的元素,比如导航栏。

.sticky-box {
  position: sticky;

4. 注意事项

1. 影响文档流

肯定定位和固定定位会使元素脱离正常文档流,这或许会影响其他元素的布局。

2. 堆叠次序

运用 z-index 操控元素的堆叠次序时要当心,保证不会出现意外的掩盖情况。

3. 功能

运用大量定位元素或许会影响页面的功能,特别是在移动设备上。

4. 兼容性

不同浏览器对定位特点的解说或许略有不同,需求进行测试以保证在各种浏览器中的兼容性。

5. 翻滚条

运用固定定位时要注意,元素固定在浏览器视窗中,或许会导致长内容的页面出现不必要的翻滚条。

5. 实际运用

1. 子绝父相

父元素 .parent 设置相对定位,而子元素 .child 则设置肯定定位,并经过 topleft 特点将其定位在父元素的中心。经过 transform: translate(-50%, -50%); 来使子元素在笔直和水平方向上都居中。这样,子元素相对于父元素进行肯定定位,即子绝父相。

HTML 代码:

<div class="parent">
  <div class="child">
    子元素
  </div>
</div>

CSS 代码:

.parent {
  position: relative; /* 父元素设置相对定位 */
  width: 300px;
  height: 200px;
}
.child {
  position: absolute; /* 子元素设置肯定定位 */
  top: 50%; /* 相对于父元素的50%处笔直定位 */
  left: 50%; /* 相对于父元素的50%处水平定位 */
  transform: translate(-50%, -50%); /* 经过平移来使子元素居中 */
}

2. 吸顶作用

要实现 CSS 中的吸顶作用,可以运用 position: sticky 特点。这个特点可以使元素在翻滚到特定方位时固定在页面上,就像是吸附在顶部一样。

.header 元素运用 position: sticky;,而且设置 top: 0; 以保证它固定在页面顶部。当翻滚页面时,.header 将保持在视口的顶部

<div class="header">这是一个吸顶头部</div>
<div class="container">
  <p>这是页面的内容。当翻滚页面时,头部会固定在顶部。</p>
</div>
<style>
  .container {
    width: 100%;
    height: 1500px; /* 用于演示翻滚作用 */
    padding-top: 50px; /* 让内容不被固定的头部遮挡 */
  }
  .header {
    position: -webkit-sticky; /* 兼容性写法 */
    position: sticky;
    top: 0; /* 在顶部固定 */
    background-color: #333;
    z-index: 1000; /* 假如有其他元素在顶部需求掩盖,则可以运用 z-index */
  }
</style>