position的值：relative和absolute的用法区别求解
我测试position属性时如图所示代码，仅更改红框处的position值。
①都填absolute，②.content里填absolute，.top里填relative，③.content里填relative，.top里填absolute，以上三种能显示出黄块在蓝块正中间的样子。
④都填relative，黄块就会和蓝块贴底边。
看起来④里的黄块与①②③中的黄块在浏览器里的位置一样，是蓝块往上升了，看起来蓝块顶部还有点跑到浏览器显示部分外面去了。
这是什么原理？求问relative和absolute区别和使用注意点。
17
收起
正在回答
1回答
同学，你好。同学可以根据下述描述及例子来理解相对定位和绝对定位。
1、position: relative;相对定位：是相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
2、position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
3、同学将两个div都设置为relative，同学将margin上边距设置了为-100px，当两个嵌套的div，如果外层父元素div的padding值为0，那么内层div的margin-top值会转移到父元素也就是外层div身上，因此蓝色会往上升，导致同学看到的效果。
如果我的回答解决了您的疑惑，采纳！祝学习愉快~~~~
相似问题
登录后可查看更多问答，登录/注册
3.从网页搭建入门Python Web
- 参与学习 人
- 提交作业 218 份
- 解答问题 3562 个
本阶段带你用Python开发一个网站，学习主流框架Django+Flask是Python Web开发的第一步，在基础知识上实现积分商城的项目开发，体验真实的项目开发流程，提高解决编程问题和效率的能力。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星