为何使用jQuery find('div.circle')修改样式后.circle元素尺寸变为0×0？

你遇到的这个问题其实是两个关键点共同导致的：绝对定位元素的包含块规则，加上开发者工具对“尺寸”的两种不同展示逻辑，并非元素的实际尺寸真的被重置了。

1. 核心原因：绝对定位的包含块不明确 #

你的.reaction容器默认是static定位（没有设置position: relative/absolute/fixed），根据CSS定位规则，里面的绝对定位元素（包括div.circle）的包含块是浏览器的视口（初始包含块），而不是.reaction本身。这意味着你设置的left:70%是相对于整个浏览器窗口宽度的70%，而不是.reaction那40px宽度的70%。

当你执行$(this).find('div.circle').css('left', '70%')时，div.circle会被直接移到视口右侧很远的位置，完全脱离了.reaction容器的范围。

2. 开发者工具的尺寸显示混淆 #

这时候你在开发者工具里看到的0×0，并不是元素的实际尺寸，而是元素在父容器（.reaction）内的可见部分尺寸：

• 你可以打开开发者工具的「计算样式」面板，查看div.circle的width和height，会发现它们仍然是你设置的40px，根本没有被修改。
• 而「布局」或「元素」面板里显示的0×0，只是因为元素完全不在父容器的可视范围内，所以父容器内没有可见的部分。

对比第一个正常的代码：你同时移动了两个绝对定位的div，它们都脱离了父容器，开发者工具默认展示的是元素的实际尺寸，所以你没注意到这个现象。

如何解决（如果想让left相对于.reaction） #

只要给.reaction添加position: relative，就能把里面绝对定位元素的包含块改成.reaction本身，这样left:70%就会相对于.reaction的宽度计算（40px的70%=28px），元素也不会脱离父容器，尺寸显示就会正常：

<div class="reaction" style="position: relative; border-radius: 50%; background-color: blue; width: 40px; height:40px; z-index: 1">

内容的提问来源于stack exchange，提问作者David Foie Gras