面试官：有哪五种定位

1. CSS的position特点值：

• static：默认值，元素在正常的文档流中，不会被特别定位。
• relative：相对于元素在文档流中的初始方位进行定位的。
• absolute：相对于最近的已定位（非static）先人元素定位。
• fixed：相对于浏览器窗口定位，即便窗口翻滚，元素也会停留在指定方位。
• sticky：基于翻滚方位在relative和fixed定位之间切换。

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

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

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

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

1. 静态定位

默认的定位方法。元素按正常的文档流进行排列，不会因为定位特点而改变方位。此刻，top、right、bottom、left和z-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 则设置肯定定位，并经过 top 和 left 特点将其定位在父元素的中心。经过 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>