css上面是字 下面是图

CSS作为HTML的样式表语言，可以为网页增添各种效果。其中，通过CSS控制上面是字，下面是图的布局是经常使用的一个技巧。

这种布局是指在网页中，某段文字的上面一部分是纯文本，下面一部分是图片。例如常见的产品介绍页，会在一段文字下方添加该产品的图片。

在实现这种布局时，我们可以使用CSS中的position属性。假设需要将一张名为“picture.png”的图片放在一段文本的下方，我们可以先在HTML中用img标签插入该图片。然后，我们可以创建一个p标签，将需要添加图片的文本放在该标签中。代码如下：

<img src="picture.png">
<p>这里是需要添加图片的文本。</p> 

接下来，我们需要使用position属性来调整图片和文本的位置。我们可以通过CSS的样式选择器选择上述p标签，并为其设置position属性的值为relative。这样，该标签内的内容将相对于该标签本身进行定位。代码如下：

p {
    position: relative;
} 

接下来，我们需要为图片添加position:absolute属性，让其相对于p标签进行定位。然后，我们可以使用bottom属性设定图片距离p标签的底部的距离。代码如下：

img {
    position: absolute;
    bottom: 0;
} 

现在，图片将会位于文本下方，且图片与文本之间有一定的距离。

总结来说，通过在HTML中使用img标签插入图片，在CSS中改变文本和图片的定位，我们可以轻松实现上面是字，下面是图的布局。