css如何让文字显示在图片上方

在网页设计中，经常需要将文字放在图片之上，这样可以更好地表现出文字和图片之间的联系。如何才能在图片上方显示文字呢？下面就让我们来学习一下利用CSS实现这个效果的方法。

    <div class="container">
        <img src="example.jpg" alt="Example">
        <p>这是图片上的文字</p>
    </div>

    /* CSS代码 */
    .container {
        position: relative;  /* 设置容器相对定位 */
    }
    img {
        display: block;  /* 将图片设置为块级元素 */
    }
    p {
        position: absolute;  /* 设置文字绝对定位 */
        top: 0;  /* 距离容器顶部为0 */
        left: 0;  /* 距离容器左侧为0 */
        z-index: 1;  /* 设置文字的z-index为1，使其显示在图片之上 */
    }

以上代码中，我们先将图片和文字都放在一个容器中，并将容器设置为相对定位。然后将图片设置为块级元素，以便更好地与文字进行定位。接着将文字设置为绝对定位，并将其距离容器顶部和左侧分别设置为0，使其出现在图片的正上方。

最后，通过设置文字的z-index为1，将文字显示在图片之上，达到效果。