CSS中position属性面试题目超详细讲解

最新推荐文章于 2023-06-25 10:40:25 发布
原创 最新推荐文章于 2023-06-25 10:40:25 发布 · 558 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#面试 #前端 #javascript

本文详述了CSS中的position属性，包括fixed、relative、absolute、sticky和static的定位特点，以及在面试中如何展示自己的理解。通过实例解析了在前端面试中关于position的常见考点，提供"子绝父相"的布局设计口诀，帮助读者深化对CSS定位的理解，提升面试竞争力。

 写在前面

优快云话题挑战赛第1期

  • 活动详情地址：优快云

  • 参赛话题：前端面试宝典

  • 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
    总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

  • 创作模板：

携手共筑前端面试宝典

题目一

position属性的区分，各种定位的的特点，以及面试官希望我们有自己的思路

考点

在这里呢我们主要分析本题目的考点是什么？面试官在问什么？我们需要考虑哪些方面？

答案

1. 固定定位fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。F

最低0.47元/天 解锁文章
LinZHiMo
关注
CSS面试题
杨前露的博客
06-03 1520
1.有哪些方式（CSS）可以隐藏页面元素？ 1.opacity:0 本质是将元素的透明度降为0，看起来是隐藏了，但是依然占据空间 2.visibility:hidden 占据空间 3.display:none 彻底隐藏元素，元素从文档流中消失，不占据空间 4.z-index:-9999 原理是将层级放到底部，看起来是隐藏了 5.overflow：hidden 这个只是隐藏元素溢出的部分 6.transform：scale（0，0） 将元素缩放为0，但是依然占据空间 2.em\px\rem区别？ Px：绝对
css 常见面试题
weixin_44922119的博客
07-27 4631
#box {
面试题准备（十五）：定位 position
番茄味姜糖的博客
02-26 603
- 文档流就是将元素放在浏览器视窗中的系统，可将放在里面的元素笼统的分为行级元素和块级元素 - 所谓定位，就是使得元素脱离文档流进行放置的属性 - 静态定位是元素的默认定位方式 - 相对定位是相对于原来位置进行定位，虽然元素脱离了原来的位置，但它原来的位置并不会被其它元素占据 - 绝对定位脱离原来位置进行定位，元素在离开原来位置后，其位置会被顺延至下一个元素 - 固定定位根据视窗进行定位，常用于制作导航栏 - z-index 可以确定重叠元素的排列顺序
css面试点-position属性
wfly blog
10-22 501
position有四个属性值：relative、absolute、fixed、static。三个不常用的：inherit、initial、sticky、unset 不设置Position的值，top，left，right，bottom，不起作用，但是设置了position:static也不会起作用。 通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。 st...
面试小汇总-(position)
weixin_39658215的博客
03-14 351
position（摘自w3school）定义和用法position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值：static继承性：no版本：CSS2JavaScript 语法：object.style.position="absolu...
回答面试官想问的position
qq_43681850的博客
03-31 357
前言 在面试中我们会遇到很多关于 position 的题目，例如 position 有哪些熟悉值，通过这篇文章可以跟着面试题学习 position。 正文 1.请讲讲你知道的 position 的值 属性 作用 是否脱离文档流 static 默认生成 否 absolute 相对于非static的父元素进行定位 是 relative 相对于元素本来存在的位置进行定位 否 fixed 相对于浏览器窗口进行定位 是 sticky 在不同情况下分别表现为fixed relative
十五道css面试题
m0_65450343的博客
04-25 7173
目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 中哪些属性可以继承？ 3.CSS3 新增伪类有那些？ 4、请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？ 5、浏览器是怎样解析 CSS 选择器的？ 6、在网页中应该使用奇数还是偶数的字体？为什么呢？ 7、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题] 8、为什么不建议使用统配符初始化 css 样式。 9、如果需要手动写动画，你认为最小时间间隔是
HTML+CSS面试题总结（附答案+视频讲解）
xm1037782843的博客
06-25 3022
前端面试题总结 面试题总结 html+css面试题 元素隐藏、盒子垂直居中
前端面试必备：CSS/HTML/JS全面题目解析
### CSS常见面试题 1. **盒模型（Box Model）的理解是什么？** 盒模型是CSS布局的基础，它描述了元素框处理元素内容...当然，面试题目千变万化，理解了这些基础知识后，还需要对细节问题进行深入学习和思考。
HTML-CSS-JavaScript（经典面试题）
weixin_66059613的博客
08-31 1303
HTML-CSS-JavaScript（经典面试题）
web前端面试常见问题二 ------css布局（position）
Edward的web前端修炼之路
06-22 3788
web前端面试常见问题二                  ------css布局（position）    前言：博主我今年大三，web前端学了也有小半年啦，因为大四没课啦，所以已经开始找实习，面试了很多大大小小的公司，有失败也有成功。接下来我将和大家分享一下我在各个公司遇到的一些常见面试题，希望能和大家相互探讨，共同进步。     二.position        p
前端面试题HTML+CSS基础篇——position
xiaomao_wxj的博客
08-06 431
position 定位 1. static 默认值，无定位，元素出现在文档流中 2. absolute 绝对定位，元素相对于static定位以外的第一个有定位的父元素进行定位，会使元素脱离文档流，不在文档流中占据空间 3. relative 相对定位，元素相对于自身进行定位，不会使元素脱离文档流，原来位置仍然占据空间 4. fixed 绝对定位，元素相当于浏览器窗口进行定位，会使元素脱离文档流，原来位置不占据空间 5. inherit 规定元素从父类继承position属性的值 ...
面试必问——定位position
qq_45018844的博客
01-04 378
定位的属性 static(默认值） absolute（绝对定位） relative（相对定位） fixed（固定定位） static 是position的默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index） absolute绝对定位 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定 例子： <!DOCTYPE
position定位属性值和元素水平、居中得面试题
yangpengze的博客
01-07 713
position定位得几种方式 position:static static(没有定位)是position的默认值，元素设置相对于原本位置的定位， 元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受 到影响 position:relative 这是相对定位是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响，一般配上position:absolute来使用俗称父相子决 position:absolute
前端开发--css--定位练习题
sundanping_123的博客
07-09 1653
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'> <title>浮动</title> <style type="text/css"> .con{ width: 100px; height: 100px; ...
Css相对定位小测试题
m0_47801930的博客
03-17 213
HTML代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../CSS/demo03.css"> </head> <body> <div class="father"> ..
position的几个属性（快速掌握面试必考）
weixin_44021199的博客
12-11 340
position：relative  相对定位  相对于原来位置  定位后空间不释放 position：absolute 绝对定位  相对于最近已定位的祖先元素（没有相对于body） 定位后空间不释放 position:fixed          固定定位  相对于浏览器位置  定位后空间释放 position：static       默认 ...
css position 和 块级/行内元素解释
weixin_34336292的博客
03-18 350
一、position 属性： static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。 relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。 absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的...
前端面试拾遗——CSS选择器、Flex布局、position
若即的专栏
09-17 5580
前端面试拾遗——CSS选择器、Flex布局、position前言  在某公司的前端面试中，被问到了关于CSS选择器跟flex布局相关的问题，在这篇文章中整理一下相关知识点。CSS选择器 关于CSS选择器跟属性的所有详细信息都可以在MDN CSS参考中获取，CSS选择器的主要分类有 基本选择器 元素选择器 类选择器 ID选择器 通配选择器 属性选择器 组合选择器 相邻兄弟选择器 普通兄弟选择器 子
评论 6
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值