目录
一,引言
定位是前端开发中一项重要的布局技术,用于控制元素在页面上的位置。常见的定位方式有相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘性定位(sticky)。下面是关于定位元素的基本认识和使用的一些要点:
-
相对定位(relative):
- 相对定位是相对于元素在正常文档流中的初始位置进行定位。元素的相对位置是保留的,其他元素不会受到影响。
- 使用相对定位可以通过设置 top、right、bottom、left 属性来控制元素的偏移位置。
-
绝对定位(absolute):
- 绝对定位是相对于最近的已定位(设置了定位属性,如 relative、absolute、fixed 或 sticky)的祖先元素进行定位。如果没有已定位的祖先元素,则相对于初始包含块(通常是窗口)进行定位。
- 使用绝对定位需要设置 top、right、bottom、left 属性来控制元素的位置。
- 绝对定位会从文档流中脱离,不会占据原有位置,因此下面的元素会上移填充空白。
-
固定定位(fixed):
- 固定定位是相对于视口(浏览器窗口)进行定位,始终保持在页面上的固定位置,不会随滚动而移动。
- 使用固定定位需要设置 top、right、bottom、left 属性来控制元素的位置。
- 固定定位的元素不会影响其他元素的布局。
-
粘性定位(sticky):
- 粘性定位是相对定位和固定定位的结合,在特定的位置设置粘性定位后,元素会在滚动到指定阈值前保持相对定位,当滚动超过阈值时,元素会变为固定定位。
- 使用粘性定位需要设置 top、right、bottom、left 属性来控制元素的起始位置,以及设置
position: sticky
属性。
总结起来,定位元素可以通过设置位置属性(top、right、bottom、left)来控制其在页面上的具体位置。相对定位相对于元素初始位置进行定位,绝对定位和固定定位相对于祖先元素或视口进行定位,而粘性定位是一种特殊的相对和固定定位的组合。这些定位方式可以帮助实现灵活的布局效果,但也需要注意其影响范围以及与其他布局属性的交互作用。在使用定位时,建议根据具体需求选择合适的定位方式,并进行必要的调整与配合,以达到预期的布局效果。
定位的元素超出文档流
二, 什么时候需要使用定位
在同一块文档流的区域内同时叠放多个标签
定位的流程:
1.通过 position 属性设置定位参照物
2.通过 方位 属性, 设置具体方位定位参照物,方位属性 top
left right bottom 他是用来设置距离参照物有多远。
他们的优先级是left>right
top>bottom
position 属性的值
static relative absolute fixed
static:静态定位,无参照物,不定位
relative:相对定位,以元素本身没有移动之前的位置为参照物
absolute:绝对定位,以 当前元素的第一个具有定位属性的
祖先级元素 为参照物,作为参照物的祖先及元素必须具有
position: relative 或者position: absolute;
如果没有定位的祖先级属性,则参照物是 body
fixed:固定定位,参照物是相对于浏览器窗口定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>认识定位</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp{
width: 200px;
height: 200px;
background-color: #04be02;
/* 相对定位 */
/* position: relative; */
/* 绝对定位 */
position: absolute;
left: 100px;
top: 100px;
}
.normal{
width: 200px;
height: 200px;
background: #f00;
}
.fu{
width: 400px;
height: 400px;
margin: 200px auto;
background-color: #f00;
position: relative;
left: 200px;
border: 1px #04be02 solid;
}
.zi{
width: 200px;
height: 200px;
background-color: #ff0;
margin: 100px auto;
position: relative;
/* position: absolute;
left: 10px;
top: 10px;
position: absolute; */
}
.sun{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
right: 10px;
top: 10px;
}
.go-top{
width: 100px;
height: 100px;
border: 1px #f00 solid;
position: fixed;
right: 100px;
left: 100px;
bottom: 100px;
top: 100px;
}
</style>
</head>
<body>
<!--
定位的元素超出文档流
什么时候需要使用定位
在同一块文档流的区域内同时叠放多个标签
定位的流程:
1.通过 position 属性设置定位参照物
2.通过 方位 属性, 设置具体方位定位参照物,方位属性 top
left right bottom 他是用来设置距离参照物有多远。
他们的优先级是left>right
top>bottom
position 属性的值
static relative absolute fixed
static:静态定位,无参照物,不定位
relative:相对定位,以元素本身没有移动之前的位置为参照物
absolute:绝对定位,以 当前元素的第一个具有定位属性的
祖先级元素 为参照物,作为参照物的祖先及元素必须具有
position: relative 或者position: absolute;
如果没有定位的祖先级属性,则参照物是 body
fixed:固定定位,参照物是相对于浏览器窗口定位
-->
<div class="wp"></div>
<span >柳如是</span>
<div class="normal">钱谦益</div>
<div class="fu">
<div class="zi">
<div class="sun"></div>
</div>
</div>
<a class="go-top" href="#">回到顶部</a>
</body>
</html>
相对定位的特点
1.相对定位是基于原来的位置进行定位
2.元素设置了相对定位以后,对元素本身没有任何影响
3.元素设置了相对定位以后虽然元素脱离文档流,但是元素本身的位置
依然占据文档流的空间
4.相对定位的元素,天然提升层级,比没有定位的元素层级高
5.相对定位的元素,可以通过left top bottom right 改变元素的位置
绝对定位的特点:
1,设置了绝对定位的元素会脱离文档流,不占据文档流空间并且提升层级
2.行元素设置完绝对定位以后,可以设置宽高,可以设置上下padding和
上下margin,如果不设置宽高,宽高由内容撑开。
3.块元素设置了绝对定位以后,自动的margin消失,如果不设置宽高
宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位
如果不存在这样祖先级元素,则相对于document(文档)定位。具有
定位属性的祖先级元素,一般需要有 relative和absolute其中一个定位元素
5.一般的,如果设置了绝对定位,那么他的父元素需要有一个固定的高
固定定位的特点
1.固定定位相对于浏览器窗口定位
2,固定定位脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位的特点</title>
<style>
*{
margin: 0;
padding: 0;
}
.clearfix::after{
content: '';
display: block;
overflow: hidden;
height: 0;
clear: both;
}
.wp{
border: 1px #f00 solid;
}
.c{
width: 100px;
height: 100px;
background-color: #04be02;
float: left;
border-radius: 50%;
}
.bar{
height: 0;
border-top: 1px #ccc solid;
float: left;
width: 100px;
margin-top: 50px;
position: relative;
}
.bar span{
float: left;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px #ccc solid;
position: absolute;
left: 34px;
top: -16px;
}
.tips{
position: absolute;
left: 200px;
top: 200px;
/* width: 200px;
height: 200px; */
background-color: #f00;
margin: 30px;
padding: 30px;
}
.promise{
margin: 0 auto;
background-color: #ff0;
position: absolute;
width: 200px;
}
</style>
</head>
<body>
<!--
相对定位的特点
1.相对定位是基于原来的位置进行定位
2.元素设置了相对定位以后,对元素本身没有任何影响
3.元素设置了相对定位以后虽然元素脱离文档流,但是元素本身的位置
依然占据文档流的空间
4.相对定位的元素,天然提升层级,比没有定位的元素层级高
5.相对定位的元素,可以通过left top bottom right 改变元素的位置
绝对定位的特点:
1,设置了绝对定位的元素会脱离文档流,不占据文档流空间并且提升层级
2.行元素设置完绝对定位以后,可以设置宽高,可以设置上下padding和
上下margin,如果不设置宽高,宽高由内容撑开。
3.块元素设置了绝对定位以后,自动的margin消失,如果不设置宽高
宽高由内容撑开
4.绝对定位是相对于他的第一个具有定位属性的祖先级元素进行定位
如果不存在这样祖先级元素,则相对于document(文档)定位。具有
定位属性的祖先级元素,一般需要有 relative和absolute其中一个定位元素
5.一般的,如果设置了绝对定位,那么他的父元素需要有一个固定的高
固定定位的特点
1.固定定位相对于浏览器窗口定位
2,固定定位脱离文档流
-->
<div class="wp clearfix">
<div class="c"></div>
<div class="bar">
<span></span>
</div>
<div class="c"></div>
</div>
<span class="tips">人有多大胆,地有多大产</span>
<div class="promise">一定能把作业完成</div>
</body>
</html>