<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">body{height: 2000px;}.photo{width: 600px;height: 600px;position: fixed;left: calc(50%-300px);top: calc(50%-300px);}</style></head><body>10月7日，昆凌在社交平台晒出自己荡秋千的美照。照片中，昆凌长发披肩，头戴假日凉快帽，穿一袭白裙在海边荡着秋千，回眸甜笑，宛若仙子。<div id="box1"><img src="img/kunling.jpg" class="photo"></div></body></html>
对了，在这里说一下，我目前是在职web前端开拓，如果你现在正在学习前端，理解前端，渴望成为一名合格的web前端开拓工程师，在入门学习前真个过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺少根本入门的视频教程也可以直接来找我，我这边有最新的web前端根本精讲视频教程， 还有我做web前端技能这段韶光整理的一些学习手册，口试题，开拓工具，PDF文档书本教程，都可以直接分享给大家。
当我下拉时，图片的位置是不会动的。纵然下滑到了最底部，图片的位置也是固定的。比拟下面这张图：
绝对定位和相对定位子绝父相
子绝父相便是指子元素设置绝对定位，而父元素设置相对定位。换句话说：如果要对一个子元素利用定位的话，让子元素（绝对定位）以其父元素（相对定位）为标准来定位。
实操代码理解
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#father{width: 300px;height: 300px;background-color: coral;position: relative;border: solid 3px red;}#son1{width: 100px;height: 100px;background-color: aqua;position: absolute;left: 20px;top: 50px;}#son2{width: 100px;height: 100px;background-color: chartreuse;position: absolute;left: 40px;top: 90px;}</style></head><body><div id="father">I am father</div><div id="son1">I am son1</div><div id="son2">I am son2</div></body></html>看图：在father这个容器设置了相对定位之后，son1和son2都设置了绝对定位，我们的子类这时实在不是在body中绝对定位（absolute），而是在其父类的范围中绝对定位（absolute）。
绝对定位
position: absolute;查找定位的参照物方法：从当前元素开始往上找，直到找到一个具有定位属性的元素为准，以这个元素为参照进行定位。如果没有一个元素有定位属性,终极就参照body进行定位。（我一贯理解的便是绝对定位便是你想定哪里定哪里）
定位的时候：结合top left right bottom 这四个方向属性进行合营定位。但是要把稳：不能同时选择left喝right
把稳：这里要差异于相对定位，在利用相对定位时，无论是否进行移动，原来的位置就没有了。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{background-color: salmon;width: 100px;height: 100px;position: absolute;left: 100px;top: 50px;}</style></head><body><div id="box1">我是box1，我采取了绝对定位</div></body></html>相对定位
position: relative;相对定位是相对付元素在文档中的初始位置——首先它涌如今它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对付”它的原始出发点进行移动；
把稳，在利用相对定位时，无论是否进行移动，原来的位置始终保留着。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: brown;position: relative;left: 300px;top: 300px;}#box2{width: 100px;height: 100px;background-color: blue;}</style></head><body><div id="box1"></div><div id="box2"></div></body></html>绝对定位和相对定位的差异相对定位的参照物是参照物本身。绝对定位的参照物便是父级元素，当父级元素中不存在相对定位，那么它的参照物便是body相对定位，设置后，原来的位置始终保留着绝对定位，设置后，原来的位置会被后面的内容霸占原文链接：https://link.zhihu.com/?target=https%3A//blog.csdn.net/hanhanwanghaha/article/details/108961741
作者：我一个超级无敌可爱的人鸭
出处：CSDN
