1.前言
我们在书写页面时,定位是一中非常强大的功能,我们在编写页面时,某些布局无法通过浮动或者是弹性盒布局展示,这时就可以用到定位了,我们可以通过定位,将盒子放置到页面上你先放置的位置,接下来我们就来详细的说说定位。
2,相对定位(position: relative;)
相对于盒子本身的位置进行位置的调整,以盒子自身位置为参照物,
并且相对定位不会脱离标准文档流,所以不会影响页面的布局
下面是关于定位的四个重要的属性
top: ; /* 设置盒子距离顶部的位置 */
right: ; /* 设置盒子距离右侧的位置 */
bottom: ; /* 设置盒子距离底部的位置 */
left: ; /* 设置盒子距离左侧的位置 */我们可以通过上面的四个属性来调整盒子在页面的位置
2.1特点
2.1.1 相对定位使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: red;
position: relative;
top:100px;
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>我们通过相对定位让这个进行了位置移动,距离视口顶部和右侧各100px的距离
2.1.2 不脱离标准文档流
<!-- HTML -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
/* CSS */
.box {
width: 100vw;
height: 500px;
background:aqua;
}
.box1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
}
.box2 {
width: 200px;
height: 200px;
background: orange;
}
上图中,我们通过相对定位,给红色盒子向左移动了100px距离,在这里我们可以看到橙色的盒子还是在红色盒子的下面,并没有因为红色盒子的移动而影响到橙色盒子的位置,所以说相对定位不会推理标准文档流(div标签,块级元素,独占一行,可以设置宽高)
2.1.3 可以设置为负值
<!-- HTML -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
/* CSS */
.box {
width: 100vw;
height: 500px;
background:aqua;
}
.box1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: -100px;
}
.box2 {
width: 200px;
height: 200px;
background: orange;
}
我们给相对定位中的left添加了负值,从效果图中 我们可以看到,红色的盒子向右移动了100px的距离,
2.1.4 不要同时设置值
我们在使用定位时,相对位置的值不可以同时设置
.
<!-- HTML -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
/* CSS */
.box {
width: 100vw;
height: 500px;
background:aqua;
}
.box1{
width: 200px;
height: 200px;
background: red;
position: relative;
top:50px;
bottom:50px;
}
.box2 {
width: 200px;
height: 200px;
background: orange;
}
从上面的代码中,我们可以看到,我们同时添加了距离顶部和底部50px的距离,从效果图中可以看到,红色盒子距离顶部移动50px的距离,距离底部没有什么变化
所以,top和bottom不能同时使用,只有top会生效,同样的left和right不能同时使用,只有left会生效
2.1.5可以和margin一起使用(不建议使用)
.box1{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
margin-left: 50px;
}
查看代码,可以看到我们先是使用定位让红色盒子向右移动了100px的距离,之后又添加了一个向左的50px的外边距, 从效果图中可以看到,红色盒子一共向右移动了150培训的距离。
2.2使用场景
1.相对定位会和绝对定位配合使用
2.提高元岁的层级帆布改变位置
3.绝对定位:(position:absolute;)
相对定位,在父元素盒子设置相对定位,在子元素盒子设置绝对定位,以父元素盒子的左上角为基点进行位置的移动,如果父元素盒子没有相对定位,则会以浏览器视口左上角为基点进行位置的移动。
相对定位可以过z-index:值;来设置显示层级,当使用绝对定位,多个子元素盒子重叠时,z-index值设置的高,就会显示在最上层
未添加z-index
.box {
width: 100vw;
height: 500px;
background:aqua;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}
.box2 {
width: 200px;
height: 200px;
background: orange;
position: absolute;
left: 150px;
}添加z-index
.box {
width: 100vw;
height: 500px;
background:aqua;
position: relative;
}
.box1{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
z-index: 1;
}
.box2 {
width: 200px;
height: 200px;
background: orange;
position: absolute;
left: 150px;
}从上图中可以看到,我没给两个子元素盒子都使用了绝对定位,box1向右移动100px的位置,box2向右移动了150px的位置,可以看到,box2处在同一行,并且box2覆盖了box1,
从第二张图中可以看到,我们给box1添加了z-index:1; 提高了box1盒子的显示层级,所以红色盒子覆盖了橙色盒子
绝对定位同样是通过top.right,bottom,left,来设置盒子距离父盒子边框的距离
并且绝对定位会脱离标准文档流:absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
3.1特点
3.1.1,脱离标准文档流
css部分
.item {
width: 100vw;
height: 500px;
background:aqua;
position: relative;
}
.box {
width: 100px;
height: 100px;
}
.box1{
background: red;
}
.box2 {
background: pink;
position: absolute;
}
.box3 {
background: yellow;
}
html部分
<div class="item">
<div class="box box1">盒子1</div>
<div class="box box2">盒子2</div>
<div class="box box3">盒子3</div>
</div>
查看代码.我们给box2添加了绝对定位,,另外两个子元素盒子只添加背景色,从效果图中可以看到,box2和box3重叠在一起了,但是我们并没有给box3添加定位,那么为什么会重叠呢
从上图中可以看到,盒子2因为添加了绝对定位漂浮起来了,离开文本盒子原先的位置,所以盒子3就会自己向上移动,所以 ,box2和box3才会重叠在一起.这届是position:absolute;会脱离标准文档流。
3.1.2可以设置为负值
和相对定位一样,绝对定位也可以设置负值
从控制台中可以看到,我们给box2设置-50px的位移,让box2向左移动了50px的位置,
3.1.3不可以同时设置值
和相对定位一样,在使用绝对定位时,不要设置相对的值(因为和相对定位相同,不在举例)
同样,在使用绝对定位时,top和bottom不能同时使用,只有top会生效,同样的left和right不能同时使用,只有left会生效
3.1.4能和margin一起使用
和相对定位一样,在使用绝对定位时,同样是可以和margin一起使用
从上图中可以看到,.我们通过绝对定位添加了向左距离30px的位移,只用我们又添加了距离上面20px位置的外边距,从图片中可以观察dao粉色盒子的位置。
3.1.5不能和浮动一起使用
观察上图，在控制台内可以看到，给box2添加了一个右浮动，正常来说， box2盒子的位置会在视口右上角(红色圆圈位置），但是绝对定位不能和浮动一起使用，所以box2盒子，只指执行了距离左侧30px的位置，并没有执行浮动
3.1.6定位元素
CSS部分
.item {
width: 100vw;
height: 500px;
background:aqua;
position: relative;
}
.box {
width: 100px;
height: 100px;
}
.box1{
background: red;
}
.box2 {
background: pink;
position: absolute;
top: 0;
right: 0;
}
.box3 {
background: yellow;
}
HTML部分
<div class="item">
<div class="box box1">盒子1</div>
<span class="box box2">盒子2</span>
<div class="box box3">盒子3</div>
</div>观察代码可以看到，我们bxo2的div标签(块元素)换成了span标签(行内元素)
如果给行内元素添加了绝对定位，那么行内愿随就会变成定位元素
3.2使用场景
- 绝对定位可以与其他定位方式（如相对定位、固定定位等）结合使用，以实现更加灵活和精确的布局效果。例如，在需要实现网格布局、响应式布局等复杂布局时，绝对定位可以发挥重要作用。
- 在需要覆盖某些内容（如加载动画、遮罩层等）时，绝对定位可以确保这些元素能够准确地覆盖在目标内容之上。通过调整偏移量和堆叠顺序（使用z-index属性），可以实现预期的覆盖效果。
4.相对定位于绝对定位的区别
1.定位基准
相对定位
- 相对定位的元素是相对于其原始位置进行定位的。即使进行了移动，元素仍然占据原来的空间，且移动后的元素会覆盖在其原始位置上的其他元素之上。
绝对定位
- 绝对定位的元素是相对于其最近的已定位（即非static定位）祖先元素进行定位的。如果没有已定位的祖先元素，则相对于最初的包含块（通常是body）进行定位。绝对定位的元素完全脱离文档流，不再占据原来的空间，其他元素会填补其原来的位置。
2.标准文档流
相对定位
- 相对定位不会脱离标准文档流
绝对定位
- 绝对定位脱离标准文档流
3.z-index影响
相对定位
- z-index索引不会影响相对定位的元素位置,相对定位的元素在层叠顺序上仍然保留在其原始位置，只是视觉上进行了移动。
绝对定位
- z-index索引会影响绝对定位的元素的位置。通过z索引属性，可以控制绝对定位元素的层叠顺序，使其覆盖在其他元素之上或被其他元素覆盖。
4.浮动影响
相对定位
- 相对定位可以搭配浮动一起使用,
绝对定位
- 绝对定位不可以搭配浮动一起使用,
5.边距和填充的影响
相对定位
- 元素的边距（margin）和填充（padding）会影响相对定位的元素的位置。这是因为相对定位的元素仍然保留在文档流中，并占据原来的空间。
绝对定位：
- 元素的边距和填充不会影响绝对定位的元素的位置。因为绝对定位的元素已经脱离了文档流，不再受其他元素的影响。
5,通过定位实现盒子垂直水平居中
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去除默认样式 */
html,body {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: #ccc;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: #f90;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>同过绝对定位,设置橙色和子距离上右下左距离视口距离为0;之后添加margin:auto;即可实现垂直水平居中
方法二
已知宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: #ccc;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: #f90;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;/* 外边距复合写法"上右下左" */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>通过绝对定位设置盒子距离视口顶部和左侧各50%,之后通过外边距设置盒子自身宽高一半的负值,
margin-top: -100px;
margin-left: -100px;就可以实现垂直水平居中了
未知宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body {
margin: 0;
padding: 0;
}
.box {
width: 100vw;
height: 100vh;
background-color: #ccc;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: #f90;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
/* CSS3位移属性,transform复合写法,中间能用逗号隔开 */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>同样通过绝对定位设置盒子距离视口顶部和左侧各50%,之后通过CSS3新增位移属性transform移动盒子-50%(自身宽高一半),就可以实现处置水平居中了,
6总结
定位是一种非常强大的功能,在书写页面时的应用也是非常广泛,熟练的应用定位,也会提高编写页面的效率。关于本篇文章没如果小编这里有遗漏或者是错误,请在评论区留言,这里也会及时补充纠正。
标签：定位,盒子,绝对,height,width,相对,background,200px From： https://blog.csdn.net/CYX_COMnn/article/details/144129681