28、absolute定位，如果父亲不是relative，那么是参考谁？

目录一、先给一个标准面试回答二、最关键的一句话三、什么叫“已定位祖先元素”四、如果父元素不是 relative到底参考谁情况 1父元素不是 relative但更上层祖先里有非 static 元素情况 2所有祖先都没有定位五、为什么很多人会说“参考 body”六、一个最适合面试的回答方式七、举个例子面试说出来更清楚示例 1参考最近定位祖先示例 2没有定位祖先八、面试官可能会追问什么1. 为什么一般给父元素加 position: relative2. absolute 会脱离文档流吗3. absolute 和 fixed 的区别九、一个高分回答模板十、简洁背诵版十一、一句话总结这是一个CSS 定位基础题但面试里如果只回答参考浏览器窗口这个回答有时候不够严谨因为它只说对了一部分。一、先给一个标准面试回答position: absolute的元素会相对于最近的已定位祖先元素进行定位。这里“已定位”指的是祖先元素的position不是static而是relative、absolute、fixed、sticky等。所以如果父元素不是relative它不会只看父元素而是会继续往上找最近的非static祖先。如果一路都没找到这样的祖先元素那最终会相对于初始包含块定位通常可以理解为页面视口。这段已经是比较标准、比较严谨的回答。二、最关键的一句话很多人记成absolute 一定相对父元素定位这是错的。更准确的说法是absolute不是相对“父元素”定位而是相对“最近的已定位祖先元素”定位。这里面试一定要说“最近的已定位祖先”这才是关键词。三、什么叫“已定位祖先元素”就是祖先元素设置了这些之一position: relativeposition: absoluteposition: fixedposition: sticky只要不是默认的position: static它就可能成为absolute子元素的参考系。四、如果父元素不是relative到底参考谁答案分两种情况。情况 1父元素不是relative但更上层祖先里有非static元素那就参考离它最近的那个非static祖先元素。例如div classgrandfather div classfather div classchild/div /div /div.grandfather { position: relative; } .father { position: static; } .child { position: absolute; top: 0; left: 0; }这里father不是定位元素grandfather是relative所以child最终参考的是grandfather情况 2所有祖先都没有定位那就相对于初始包含块定位。在大多数情况下面试里可以通俗地说成相对于浏览器视口 / 页面根元素但更严谨一点是相对于initial containing block初始包含块五、为什么很多人会说“参考 body”这是一个很常见的误区。很多教程会简化说没有定位父元素时absolute 相对 body 定位这句话在某些表现上看起来像对的但规范意义上并不严谨。更准确的说法是它不是简单“参考 body”而是参考初始包含块在浏览器里通常表现得接近视口所以面试里最好不要只说相对 body更推荐说如果没有最近的已定位祖先就相对于初始包含块定位通常可以近似理解为视口。这会显得你更专业。六、一个最适合面试的回答方式你可以按这个逻辑说absolute定位时先不会直接看父元素是不是父节点而是会从当前元素开始沿着祖先节点一层层往上找找到最近的position不为static的祖先元素作为定位参考。如果父元素不是relative但爷爷元素是relative那就参考爷爷。如果所有祖先都是默认的static那最终就会相对于初始包含块定位一般可以理解为视口。这个表述就很完整。七、举个例子面试说出来更清楚示例 1参考最近定位祖先div classbox1 div classbox2 div classbox3/div /div /div.box1 { position: relative; } .box2 { position: static; } .box3 { position: absolute; top: 10px; left: 20px; }这里.box3不参考.box2而是参考.box1。示例 2没有定位祖先div classbox1 div classbox2 div classbox3/div /div /div.box1 { position: static; } .box2 { position: static; } .box3 { position: absolute; top: 0; left: 0; }这里.box3会相对于初始包含块定位。八、面试官可能会追问什么1. 为什么一般给父元素加position: relative因为这样可以让子元素的absolute定位约束在父容器内不至于跑到更外层祖先或视口去。比如常见场景角标弹层按钮内图标图片上的绝对定位文案父元素加position: relative;子元素加position: absolute;这样最常见。2.absolute会脱离文档流吗会。这也是面试经常一起问的。你可以顺手补一句absolute元素会脱离普通文档流不再占据原来的布局空间所以可能会导致父元素高度塌陷通常需要额外处理。3.absolute和fixed的区别可以顺带答absolute相对最近已定位祖先fixed通常相对视口定位这也是高频追问。九、一个高分回答模板position: absolute的定位参考物不是固定的父元素而是最近的已定位祖先元素。这里“已定位”指的是祖先元素的position不是默认的static比如relative、absolute、fixed、sticky。所以如果父元素不是relative它会继续往上找最近的非static祖先如果爷爷是relative那就参考爷爷。如果所有祖先都没有设置定位那最终会相对于初始包含块定位通常可以近似理解为浏览器视口。所以实际开发里我们常给父元素加position: relative就是为了让绝对定位子元素以父容器作为参考系。十、简洁背诵版absolute不是一定相对父元素定位而是相对最近的非static祖先元素定位。如果父元素没设置定位就继续往上找如果所有祖先都没有定位就相对于初始包含块通常可以理解为视口。十一、一句话总结absolute看的是最近的已定位祖先不是单纯看父元素找不到就参考初始包含块。