1.什么是绝对定位
（1.）是相对于 除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位
是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位【好好理解这句话】即，【绝对定位，是相对于，已经定位的父元素进行定位的，就是，它会从它的父元素一点一点往上层去找，（如果它的父元素的定位属性是除了position:static 之外的其他的呢，它就以它的父元素作为参考点；如果它的父元素就是普普通通的static，那么它就继续往上找，如果都不是，就找到了body这一块，也就是针对整个页面窗口，进行上下左右的这么一个定位。）】
（2。）把position属性的值设置为absolute时，代表开启绝对定位模式
（3.）被设置为绝对定位的元素会脱离标准流
（4.）当多个绝对定位元素出现相互遮盖的情况时，可以使用z-index属性设置层级
z-index该属性只有在position值为absolute时才有效
2.绝对定位和相对定位搭配使用 – 经典用法 – 大厂常用
情景：当我们想要让子元素相对于父元素进行绝对定位时，可以在父元素上使用相对定位，在子元素上使用绝对定位
.parent{height:300px;background:yellow;postion:relative; }
.child { height:100px;width:100px;background:pink;position:absolute;left:50%; }
<div class="parent">我是父元素，我使用相对定位
<div class="child">我是子元素，我使用绝对定位</div>
</div>
小例子1：给2号设置绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.phone1 {
height: 100px;
background: red;
}
.phone2 {
height: 100px;
background: green;
/* 给2号设置了position: absolute;后发现1.2.
我们发现，原来是占满一行的，因为是块级作用域，
1.而现在却变窄了，变成其内容的宽度
并且，3号，也移上去了。2号完全浮在3号的上边
即可以理解为，设置成position: absolute;后，
2.变成了脱离标准流的状态*/
position: absolute;
left: 100px;
}
.phone3 {
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="phone1">华为mate1手机</div>
<div class="phone2">华为mate2手机</div>
<div class="phone3">华为mate3手机</div>
</body>
</html>
小例子2：给3号也设置成绝对定位，看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.phone1 {
height: 100px;
background: red;
}
.phone2 {
height: 100px;
background: green;
/* 给2号设置了position: absolute;后发现1.2.
我们发现，原来是占满一行的，因为是块级作用域，
1.而现在却变窄了，变成其内容的宽度
并且，3号，也移上去了。2号完全浮在3号的上边
即可以理解为，设置成position: absolute;后，
2.变成了脱离标准流的状态*/
position: absolute;
z-index: 1;
}
.phone3 {
height: 100px;
background: blue;
/* 给3号也设置成绝对定位
我们发现 2号 即绿色的区域看不见了，但代码中还是有的
此时，我们把3号隐藏即设置 display: none; 发现2号绿色又可以看见了
这就说明，把2号和3号同时设置了position: absolute; 之后，
3号会把2号给遮盖掉，3号完全浮在2号上边，完全遮挡了2号手机
如果把2号内容加长(比如：华为mate2手机22222)，比3号长一些，
这样，3号就遮不住它了，那么我们就还是可以看到2号绿色区域的
*/
position: absolute;
/* 上述，就说明，如果我们对多个元素同时使用绝对定位的时候，会出现相互覆盖的情况
那么，怎么解决这个问题呢？？ 使用z-index 层级属性呀
我们给2号设置 z-index: 1; 发现，2号又覆盖了3号。*/
}
</style>
</head>
<body>
<div class="phone1">华为mate1手机</div>
<div class="phone2">华为mate2手机</div>
<div class="phone3">华为mate3手机</div>
</body>
</html>
小例子3：给父元素设置position: absolute;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.parent {
height: 300px;
background: yellow;
/* 给父元素设置position: absolute;
我们发现，父元素的宽度变窄了，与内容宽度相同，
【因为，其内容宽度(子元素也是它的内容呀)是100，所以它的宽度也变成100】 */
position: absolute;
}
.child {
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
小例子4：理解【是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位】这句话
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.parent {
height: 300px;
background: yellow;
}
.child {
height: 100px;
width: 100px;
background: red;
/* 给子元素设置position: absolute; top: 0px; 父元素不设置position属性
我们发现，子元素 超出了其父元素的区域，冒出来了
这时，我们就能看出来，child进行绝对定位的时候，肯定不是基于其父元素的
而是以整个窗口作为参考点，
这样，我们就可以理解【绝对定位，是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位】
这句话了*/
position: absolute;
top: 0px;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
小例子5：一直往上找，都不是非static 就找到了body那里
它的parent也管不了它哈哈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.parent {
height: 300px;
background: yellow;
}
.child {
height: 100px;
width: 100px;
background: red;
/* 给子元素设置position: absolute; top: 0px;
我们发现，子元素 超出了其父元素的区域，冒出来了
这时，我们就能看出来，chile进行绝对定位的时候，肯定不是基于其父元素的
而是以整个窗口作为参考点，
这样，我们就可以理解【绝对定位，是相对于除了static定位之外的第一个父元素进行定位，如果没有就相对于页面定位】
这句话了*/
position: absolute;
top: 0px;
left: 0px;
}
.box {
padding: 50px;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</div>
</body>
</html>
小例子6：
最外层 box 会塌陷，缩在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.parent {
height: 300px;
background: yellow;
position: absolute;
width: 500px;
}
.child {
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 0px;
left: 0px;
/* top: 20px;
left: 20px; */
}
.box {
padding: 50px;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</div>
</body>
</html>
小例子7：经典用法。
-大厂进行页面布局的时候经常用到的一个布局技巧-要牢记
将小例子6 中的 parent 的 position: absolute;
改成position: relative; 好处多多。经典用法。
解决了 最外层 box 的塌陷问题（因为，如果是 absolute ， parent 会脱离标准流呀，而relative 不会脱离标准流）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位</title>
<style>
.parent {
height: 300px;
background: yellow;
position: relative;
width: 500px;
}
.child {
height: 100px;
width: 100px;
background: red;
position: absolute;
top: 0px;
left: 0px;
}
.box {
padding: 50px;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
