为什么需要定位?当需要对某些元素设定在特殊的位置的时候,则需要进行定位操作。定位操作比较灵活,可以使得元素的位置在页面任何地方进行显示。但是定位在页面布局中也不是权宜之计,原因:当两个元素在同一文档流中中的时候,增加一个元素的高度/宽度,另一个元素会随着文档流自动增加/减少。浮动也是如此,会随着父元素的位置变化而变化。但是如果使用定位来布局两个元素,当一个元素高度/宽度变化,另一个元素由于位置固定在页面某处,因此不会随着页面的变化而变化,此时就需要手动修改另一个元素的高度/宽度,显示很麻烦。
因此:
- 页面布局:使用默认文档流/浮动。
- 特定元素布局:采用定位的方式。
如何实现定位?
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;
}
注意:
-
如果有多层嵌套定位,那么绝对定位元素只参考于最近一层的定位元素来设置偏移量。
-
绝对定位元素也会因为其相对目标元素的移动而移动。
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>
可以看到,同级粘性元素,后一个元素会覆盖前一个元素。