2026年web前端定位测试题及答案

2026年web前端定位测试题及答案

一、单项选择题(总共10题，每题2分)1.以下关于position:static的描述，正确的是（）A.默认值，无法通过top/bottom/left/right偏移B.会脱离文档流C.参考父元素定位D.会覆盖其他元素2.元素设置position:relative后，偏移属性的参考对象是（）A.视口B.自身原来的位置C.最近的定位祖先D.文档根元素3.绝对定位元素的包含块是（）A.父元素B.文档根元素C.最近的已定位（非static）祖先元素D.视口4.position:fixed元素的定位参考是（）A.父元素B.最近定位祖先C.自身位置D.浏览器视口5.粘性定位（sticky）触发“粘性”状态的必要条件是（）A.达到阈值且滚动容器滚动B.元素在文档流中C.父元素是relativeD.元素有固定宽度6.z-index属性生效的前提是（）A.元素是block级B.元素设置了非static的positionC.元素有宽高D.元素在文档流中7.元素设置position:absolute后，其display属性默认会变成（）A.inlineB.inline-blockC.blockD.保持原有值8.以下关于绝对定位的描述，正确的是（）A.不会脱离文档流B.参考父元素的paddingbox定位C.会保留原来的位置D.脱离文档流且不占位9.粘性定位元素失效的常见原因是（）A.父元素设置了overflow:hiddenB.元素有固定高度C.父元素是relativeD.元素设置了margin10.若父元素设置position:relative，子元素设置position:absolute，子元素的left:0是相对于父元素的（）A.contentboxB.paddingboxC.borderboxD.marginbox二、填空题(总共10题，每题2分)1.CSS中用于定位的属性是______，其取值包括static、relative、absolute、fixed和______。2.定位元素的偏移属性包括top、bottom、left和______，它们用于调整元素的位置。3.绝对定位元素的包含块是最近的______（非static）祖先元素的paddingbox。4.z-index属性的默认值是______，值越大元素堆叠顺序越______。5.粘性定位（sticky）需要满足两个条件：一是设置______（如top:0），二是元素所在的______发生滚动。6.position:fixed元素的定位参考是______，不受页面滚动的影响。7.position:relative元素偏移后，原来的位置会______，不会脱离文档流。8.position:absolute元素会______文档流，不再占据原来的空间。9.多个定位元素重叠时，______属性决定了它们的堆叠顺序，值大的元素在______。10.粘性定位元素若父元素设置了______，可能会导致粘性效果失效，因为该属性会裁剪滚动容器。三、判断题(总共10题，每题2分)1.position:static的元素可以通过top属性偏移位置。（）2.position:relative的元素会脱离文档流，不再占据原来的位置。（）3.绝对定位元素的包含块是最近的设置了position:relative的祖先元素。（）4.position:fixed的元素会跟随页面滚动而移动。（）5.粘性定位（sticky）需要设置阈值（如top:20px）才能触发粘性状态。（）6.z-index属性对position:static的元素有效。（）7.元素设置position:absolute后，其display属性会自动变成block。（）8.绝对定位元素会覆盖浮动元素，因为绝对定位的堆叠层级更高。（）9.粘性定位元素的父元素高度小于自身高度时，粘性效果会失效。（）10.position:relative的元素偏移后，原来的位置仍然保留，其他元素不会占据该位置。（）四、简答题(总共4题，每题5分)1.请列举CSS中position属性的五个取值，并简要描述各自的核心特点。2.请说明绝对定位元素的包含块确定规则。3.请简述粘性定位（sticky）的触发条件及常见的失效原因。4.请解释z-index属性的作用及生效条件。五、讨论题(总共4题，每题5分)1.请讨论position:relative和position:absolute的区别与联系，举例说明它们的应用场景。2.请分析position:fixed在移动端开发中可能遇到的问题及对应的解决方法。3.请对比粘性定位（sticky）与固定定位（fixed）的适用场景，并说明选择依据。4.请讨论多个定位元素重叠时的堆叠顺序问题，如何通过CSS属性控制堆叠层级以避免布局混乱。答案一、单项选择题答案1.A2.B3.C4.D5.A6.B7.C8.D9.A10.B二、填空题答案1.position；sticky2.right3.定位4.auto；高5.阈值；滚动容器6.浏览器视口7.保留8.脱离9.z-index；上面10.overflow:hidden三、判断题答案1.×2.×3.×4.×5.√6.×7.√8.√9.√10.√四、简答题答案1.position的五个取值及核心特点：①static：默认值，元素遵循正常文档流，无法用偏移属性调整位置；②relative：相对自身原位置偏移，保留原占位，不脱离文档流；③absolute：脱离文档流，参考最近非static定位祖先的paddingbox定位，不保留原占位；④fixed：脱离文档流，参考浏览器视口定位，不受页面滚动影响；⑤sticky：结合relative和fixed特点，滚动未达阈值时为relative，达阈值后为fixed，需设置阈值和滚动容器。2.绝对定位元素包含块确定规则：①若最近祖先元素设置非static定位（如relative、absolute等），包含块是该祖先的paddingbox；②若无此类祖先，包含块是文档根元素（html）的paddingbox。3.粘性定位触发条件：①设置阈值（如top:0）；②滚动容器发生滚动且元素达阈值位置。常见失效原因：父元素overflow:hidden（裁剪滚动容器）、父元素高度小于粘性元素高度（无法滚动触发）、未设置阈值、滚动容器不是父元素（如祖先元素滚动）。4.z-index作用：控制定位元素的堆叠顺序，值越大越靠上。生效条件：①元素需设置非static的position属性；②值为整数（正负或0），默认auto（等同于0，不创建新堆叠上下文）。五、讨论题答案1.区别：①relative相对自身原位置偏移，保留原占位，不脱离文档流；absolute参考定位祖先偏移，不保留原占位，脱离文档流。②联系：absolute常依赖relative作为包含块（父relative、子absolute实现局部定位）。应用场景：relative用于微调元素（如图标相对文字偏移）；absolute用于弹出层（如导航下拉菜单，父菜单relative、子菜单absolute）、模态框等。2.移动端fixed问题及解决：①问题1：ios滚动时fixed元素闪烁/滞后。解决：用-webkit-overflow-scrolling:touch优化，或用sticky代替。②问题2：软键盘弹出时fixed元素偏移。解决：监听软键盘事件，动态改position为absolute或隐藏元素。③问题3：视口单位（vh）不准确。解决：js获取实际视口高度，或用百分比代替vh。3.适用场景对比：①fixed适用于始终固定在视口的元素（如底部导航、回到顶部按钮）；②sticky适用于滚动到阈值后固定的元素（如文章标题栏，滚动到顶部后固定）。选择依据：需始终固定用fixed，需“粘性”固定用sticky。例如电商筛选栏，滚动时随内容滚动，到顶部后固定，用sticky更合适。4.堆叠顺序问题及控制：①