2024年最全前端入门篇（二十七）定位(3)，最新美团点评web前端团队面试题及答案

最后

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

html文件：

div1

div2

效果：

css文件：

div {

width: 200px;

height: 300px;

background-color: yellow;

border: 1px solid black;

/* position: fixed;

bottom: 200px;

right: 30px; */

}

.container {

margin: auto;/* 居中 */

background-color: greenyellow;

}

.div1 {

position: relative;

top: 50px;

left: 50px;

}

效果：

绝对定位

---

和浮动float类似，像绑气球，“灵魂不在，肉体也不在”

官网链接

在body中

div {

width: 200px;

height: 200px;

background-color: yellow;

border: 1px solid black;

}

.div1 {

position: absolute;

top: 50px;

left: 50px;

}

html文件：

div1

div2

效果：

在div中

div {

width: 200px;

height: 300px;

background-color: yellow;

border: 1px solid black;

}

.container {

margin: auto;/* 居中 */

background-color: greenyellow;

}

.div1 {

position: absolute;

top: 100px;

left: 100px;

}

html文件：

div1

div2

效果：div1并不在container中，而是相对body做位置(top,left)调整

原因：

绝对定位会一层层向上寻找，直到找到有一个父级是带有position样式的，就依据这个父级做位置调整，找不到position样式，就用默认的，以body为参考调整位置

代码修改：

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分内容