如何实现相对定位div内文本环绕绝对定位div？

嘿，我来帮你搞定这个文本环绕的问题～首先得说清楚你当前代码的核心问题：你给#about用了position:absolute，这个属性会让元素脱离正常文档流，浏览器在排版#about-ct里的文本时，根本不会考虑它的存在，自然就没法实现环绕效果了。

下面是不用<br>和text-indent的解决方案，主要用到CSS的浮动和shape-outside属性，完美适配你的布局需求：

修改后的完整代码 #

<style>
#about {
  width: 100px;
  margin: 10px;
  padding: 5px;
  text-align: center;
  background: #D7D8A2;
  border: 0.1em dotted #7A7A7A;
  /* 替换绝对定位为浮动，让元素留在文档流中 */
  float: left;
  /* 用margin替代原来的left/top定位，还原你想要的位置 */
  margin-left: -9px;
  margin-top: 105px;
  /* 关键属性：告诉浏览器文本要环绕这个元素的边界 */
  shape-outside: inset(0 0 0 0);
  /* 可选：增加文本与元素的间距，让布局更宽松 */
  shape-margin: 10px;
  z-index: 15;
} 

#about-ct {
  width: 95%;
  /* 把固定height改成auto，避免文本被截断；如果需要固定高度可以保留，但要注意overflow */
  height: auto;
  margin: 10px;
  background: #FFFFFF;
  border: 0.1em dotted #7A7A7A;
  position: relative;
  top: -35px;
  z-index: 12;
} 
</style>
<section id="section">
<div id="about">About</div>
<div id="about-ct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</section>

关键修改点说明 #

1. 替换绝对定位为浮动：把position:absolute换成float:left，让#about留在文档流里，这样文本排版时会识别它的位置。
2. 用margin还原定位：原来的left:-9px和top:105px换成margin-left:-9px和margin-top:105px，精准还原你想要的元素位置。
3. shape-outside实现环绕：这个CSS属性专门用来定义文本环绕的区域，inset(0 0 0 0)表示文本会紧贴#about的边缘环绕；如果需要非矩形环绕，还可以用圆形、多边形等参数。
4. 可选优化：shape-margin：如果觉得文本和#about太近，加个shape-margin就能增加间距，提升美观度。

这样修改后，#about-ct里的文本就会自然环绕#about元素，完全不用依赖<br>或者text-indent啦～

内容的提问来源于stack exchange，提问作者回答を探している人