关于定位
关于定位
emmm，怎么开头那。。。好纠结。
这是一个关于定位的总结，恩，就是那种网上一搜一大片的那种，加上了一些我自己的话。
定位测试的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
height: 5000px;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
.box {
width: 400px;
height: 2000px;
}
.box1 {
background-color: red;
position: relative;
top: -20px;
left: -10px;
z-index: -1;
}
.box2 {
background-color: green;
position: absolute;
top: 100px;
left: 100px;
}
.box3 {
background-color: blue;
position: fixed;
top: 200px;
left: 200px;
}
.box4 {
background-color: black;
color: white;
position: sticky;
top: 0px;
left: 300px;
}
</style>
</head>
<body>
<div class="box">
<div class="ex">参照盒子，不设置定位</div>
<div class="box1">相对定位：不脱离文档流，相对于自身定位</div>
<div class="box2">绝对定位：脱离文档流，相对于离自身最近的定位的祖先元素定位，会一直向上查找，直到body</div>
<div class="box3">固定定位：脱离文档流，相对窗口定位</div>
<div class="box4">黏性定位：常态时不脱离文档流，当卷动到屏幕外时，脱离文档流</div>
</div>
</body>
</html>
定位的语法（搬运）
static： 对象遵循常规流。此时4个定位偏移属性不会被应用。
relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
sticky： 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）
自己的想法
关于我自己的想法，可能对可能不对，仅供参考。
static：默认值。就是你没有给position取另外的值就都是这个，他什么都不会发生，自身应该是什么样就还是什么样。
relative：相对定位，对象遵循常规流。就是相对于自身进行定位，top，right，bottom，left四个属性的取值可为正也可为负，
值得注意的是，例如top：10px； 是相对于自身本来的位置向下移动10px。。。就是可以理解为定位后的位置头顶距离原来的位置有10px的距离（怎么感觉越解释越不清楚了）
ps又ps：relative没有脱离文档流，但是它不会影响其他元素自身的位置，当然他会遮盖文档流中的普通元素，也可以通过z-index： ；来调节以0为界限。还有一件事，怎么说那，relative移动后现在的位置不会影响到其他的元素，但是他移动前的位置还在，就是我人虽不在那里了，但还是那里还是我的地盘，其他人不能用，飘在头顶我管不着，但是你不能站上来（大概）。
ps又ps又px：除了定位外，relative通常还用来定义 absolute的参照物。恩，到absolute再说。
absolute：绝对定位，对象脱离文档流，简单来说，就是正常的文档里是一个桌面，而脱离文档流，则是飘在了桌面的上面，你能看见，但是对于桌面来说，它本身的位置上并没与东西，参考浮动。绝对定位的偏移属性是相对于距离自身位置最近的设置了定位的祖先元素，找不到的话，会回溯到body为止。就是刚刚说的可以设置relative来给absolute一个参照物。
ps：暂时没有ps，占个位置，有了再写。
fixed：固定定位，对象脱离文档流，相对于窗口定位。许多网页上那些两侧的广告，下方的锚点，就是不论你怎么上下拉动滚动条，他都在窗口的同一位置的，大都可以用fixed实现。fixed是相对于浏览器窗口定位的，通过定位偏移属性订到哪里，他就在那里不会动了。
sticky：黏性定位，对象在常态时遵循常规流。emmm，这个属性怎么说那，简单来说就是你在没有触发他的时候，他是在常规文档流中的，出发后，他相当于fixed，脱离文档流，定在相对于窗口（父元素？）的某个位置（官方文档说是触发后相当于fixed，那应该就是相对于窗口，但是有些问题，后面会解释），然后固定在那里。
ps：但是黏性定位有个问题，就是定位的子元素是不能脱离父元素的，如果你的父元素高度只有100px 那当他脱离文档流后也出不去父元素的框（你是爸爸的崽，飘在天上也逃不出我的手掌心），可能这么说有点抽象，贴个代码吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关于黏性定位能不能脱离爸爸的怀抱的问题</title>
<style>
body {
height: 5000px;
}
.dad {
width: 300px;
height: 300px;
border: 1px solid black;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: sticky;
top: 0px;
left: 400px;
}
</style>
</head>
<body>
<div class="dad">
<div class="son"></div>
</div>
</body>
</html>
可以看到父框的宽度为300px；黏性定位的left为400px；但是他还被父框拦在了怀里，
向下也是一样，他并不能脱离bad的怀抱，所以当你的页面结构复杂的时候，黏性定位的使用要慎重一点，它可能做不到你让他做的事情，不是它不愿意，而是它的爸爸不允许（大雾）。
写在最后的话
虽然很可能这篇博客的访问量都是我一个人创造的，但是姑且还是说一下，如果你看到了了这篇博客，并且看到了这里，并且和我一样也是一个正在学习前端的萌新的话，在实际应用这些东西之前，请按照自己的理解实验一下效果，实际看看这些东西到底是什么，如果我有什么写的不对的，也欢迎回来喷我，放开喷，没事，但是要带着干货。结束。
本文地址：https://blog.csdn.net/m0_54067601/article/details/111941221