CSS 环绕效果实现 - 使用 position 和 z-index 属性

CSS 环绕效果可以使用 CSS 的 position 属性和 z-index 属性来创建。下面是一个简单的示例：

HTML 代码：

<div class='wrapper'>
  <img src='image.jpg' alt='Image'>
  <div class='text'>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

CSS 代码：

.wrapper {
  position: relative;
  display: inline-block;
}

img {
  float: left;
  margin-right: 20px;
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}

在这个例子中，wrapper div 包含了一个图片和一个文本块。图片是使用 float 属性向左浮动的，而文本块则使用 position 和 z-index 属性来将其放置在图片之上。通过设置文本块的背景色和透明度，可以创建一个类似于环绕效果的外观。