CSS：滚动时的静止图像，但下面的内容超过它

Question

现在，当用户滚动页面时会发生这种情况： https://www.youtube.com/watch?v=Mtuy1E5JPew

并here显示页面。

正如您所看到的，<?php foreach ($response->HotelListResponse->HotelList->HotelSummary as $hotel) { $_SESSION["id"]=$hotel->hotelId; echo $_SESSION["id"];?> ?> <input class="bookbtn mt1" name='<?php echo $hotel->hotelId;?>' id='btn_<?php echo $hotel->hotelId; ?> onclick="send(<?php echo $hotel->hotelId; ?>)" type="button" value="Voir Détails"> <?php } ?> <script> function send(id) { $.ajax({ url: "details.php", type: 'post', contentType: "application/x-www-form-urlencoded", data: '{id:id}', success: function (data, status) { console.log("Success!!"); console.log(data); console.log(status); } }); } </script> （大黑白图像）滚动＆＃34;通常＆＃34;。我希望改变这种运动（2张图像是随之而来的）：

正如您所看到的，黑白图像保持不变，但下面的内容会上升并覆盖它。

以下是元素的放置方式（简单方案）：

img#intro

以下相关的CSS：

<div id="container">
    <img ... />
    <img ... />
    <img src="" id="intro" /> <--- THIS IS THE B/W IMAGE!

    CONTENT BELOW
</div>

Answer 1

我认为您正在考虑拥有git位置图片，而您希望“超越它”的内容为fixed位置且relative更高。

Example

HTML

z-index

CSS

<div class="container">
    <div class="fixed-container">
        <img src="http://placehold.it/1000x300" class="fixed"/>
    </div>
    <div class="overlay">
        content goes here
    </div>
</div>