CSS元素定位总结

为什么需要定位？当需要对某些元素设定在特殊的位置的时候，则需要进行定位操作。定位操作比较灵活，可以使得元素的位置在页面任何地方进行显示。但是定位在页面布局中也不是权宜之计，原因：当两个元素在同一文档流中中的时候，增加一个元素的高度/宽度，另一个元素会随着文档流自动增加/减少。浮动也是如此，会随着父元素的位置变化而变化。但是如果使用定位来布局两个元素，当一个元素高度/宽度变化，另一个元素由于位置固定在页面某处，因此不会随着页面的变化而变化，此时就需要手动修改另一个元素的高度/宽度，显示很麻烦。

因此：

• 页面布局：使用默认文档流/浮动。
• 特定元素布局：采用定位的方式。

如何实现定位？

position：用于指定一个元素在文档中的定位方式。top right bottom left的属性决定了该元素的最终位置。

定位类型

属性值	说明
static	默认形为，参考文档流
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

概念：定位元素：是其计算后位置属性为relative absolute fixed sticky中的一个元素。

单位：

• px 固定长度单位
• % 相对单位，相对于父元素的尺寸
• em 相对单位，相对于父元素的尺寸

1. relative相对定位

设置了position:relative的元素，会先放置在原来所处的文档流处，再不改变页面布局的前提下通过top right 等调整位置，因此会在此元素未添加定位时所在的位置留下空白。也即原来所处的文档流不会影响后继的元素（保留着），通过top等调整元素相对于原来文档流的位置。

<p>
    <span></span>
    前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。
</p>

<style>
p > span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: linear-gradient(45deg,wheat,yellowgreen);
    // 添加相对定位
    position: relative;
    left: 90px;
}
</style>

注意：由于相对定位是相对于原来所处的文档流，因此当页面向上滚动的时候，原来的文档流所处的位置也会随之向上滚动，而相对定位的元素也会随着原来文档流位置的变化而变化。

2. absolute绝对定位

绝对定位相较于相对定位更灵活，设置绝对定位的元素，会脱离原来的文档流，类似于浮动元素一样，其原来的文档流空间会被后继元素占用，也即出现丢失空间的情况。其也是通过top bottom等设置其的偏移量。但是不同于相对定位，绝对定位元素默认相对于整个文档流，也即整个页面的偏移。

但是如果仅仅设置一个方向的偏移，其他方向还是在原来文档流的方向。

查看以下代码：

<p>
    <span></span>
    前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。
</p>

<style>
p {
    width: 400px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
}

p > span {
     display: inline-block;
     width: 50px;
     height: 50px;
     background: linear-gradient(45deg,wheat,yellowgreen);
     position: absolute;
     top: 20px;
 }
</style>

除了相对于默认文档流的偏移量，还可以设置相对于父盒子的偏移量。

在父盒子元素上面添加定位属性（任何的定位属性都行），也是一种方式，告诉绝对定位元素：我和你都是定位元素，你可以参照我进行偏移哦。

p {
    width: 400px;
    height: 300px;
    border: 1px solid red;
    margin: 0 auto;
    // 父元素添加相对定位
    position: relative;
}

p > span {
     display: inline-block;
     width: 50px;
     height: 50px;
     background: linear-gradient(45deg,wheat,yellowgreen);
    // 子元素添加绝对定位
     position: absolute;
     top: 90px;
 }

注意：

1. 如果有多层嵌套定位，那么绝对定位元素只参考于最近一层的定位元素来设置偏移量。

2. 绝对定位元素也会因为其相对目标元素的移动而移动。

3. 定位元素尺寸问题

查看以下代码

<div class="box">
    <div></div>
</div>

<style>
.box {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
}

.box > div {
    width: 200px;
    height: 200px;
    background: linear-gradient(90deg,wheat,yellowgreen);
    position: absolute;
    top: 100px;
    left: 100px;
    right: 0px;
}
</style>

可以看出最后设置的right:0px是没有效果的，原因：当设置了left:100px的时候，默认right:auto，此时再设置right是无效的。

以上是设置了高度的定位元素偏移问题。

如果没有设置高度，但是依然设置了偏移量，会出现什么情况呢。

<div class="box">
    <div></div>
</div>

<style>
.box {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    margin: 0 auto;
    position: relative;
}

.box > div {
    background: linear-gradient(90deg,wheat,yellowgreen);
    position: absolute;
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
}
</style>

效果：

看到仍然可以呈现和之前的效果。而此时是通过偏移量来进行设置的。但是需要注意的一点就是：必须同时设置top right bottom left的值，且任一边的值都都不能大于父元素的高/宽，不然没有显示效果。

4. 纵向重叠

一般给一个元素添加定位属性，那么该元素的层级变会增加，使其可以在其他元素上方进行显示。但是有时候又不想让定位元素显示优先级太高。此时可以通过z-index来增加/减少显示层级。

z-index可以用于控制元素的上下级，数值越大越在上面。

注：父级子元素设置z-index没有意义，子元素永远在父元素上面。

且后声明的定位元素权重层级更高。

5. 固定定位

position:fixed

采用固定定位的元素，会相对于整个页面进行偏移量设置，且设置了固定定位的元素当前文档流会被其他元素占用，且只有设置了top left right元素才起作用。特别的是，如果当前元素被之后定位元素覆盖，可以采用z-index提高层级。

6. 粘性定位

position:sticky

添加了粘性定位的元素，当该元素达到了设定的相对某一元素的偏移量的时候，该元素会固定在当前位置处。

非同级元素的粘性定位

<article>
    <section>
        <h2>cheng1</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
    </section>
    <section>
        <h2>chen2</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
    </section>
    <section>
        <h2>chen_cheng</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
    </section>
</article>

<style>
article {
    width: 300px;
    height: 300px;
    border: 2px solid #d8d3cb;
    overflow: auto;
    margin: 0 auto;
}

article section {
    margin-bottom: 200px;
}

article section h2 {
    background: linear-gradient(-45deg,wheat,navajowhite,yellowgreen);
    color: white;
    position: sticky;
    top: 0px;
}

article section:nth-of-type(even) h2 {
    background: linear-gradient(45deg,black,indigo,olive);
}
</style>

可以看到，非同级粘性元素会顶掉上一个粘性元素。

同级粘性元素定位

<article>
    <section>
        <h2>cheng1</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
        <h2>chen2</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
        <h2>chen_cheng</h2>
        <p>前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。</p>
    </section>
</article>

<style>
article {
    width: 300px;
    height: 200px;
    border: 2px solid #d8d3cb;
    overflow: auto;
    margin: 0 auto;
}


article section h2 {
    background: linear-gradient(-45deg,wheat,navajowhite,yellowgreen);
    color: white;
    position: sticky;
    top: 0px;
}

article h2:nth-of-type(even) {
    background: linear-gradient(45deg,black,indigo,olive);
}
</style>

可以看到，同级粘性元素，后一个元素会覆盖前一个元素。