我的背景图片遮盖了应位于其下方的div

我想将post块(一组可滚动的帖子集)放置在image块下方,但post块卡在了image块后面,并且也在其后面滚动。想知道为什么会这样吗?

我尝试过更改position元素的类型,等等,但这只是切断了图像(另一个奇怪的问题)

<template>
  <div class="container">
    <div class="image-block" :style="bgImage">
      <h1 class="blog_title">Discover the latest goings on at ****.</h1>
    </div>
    <br/>
    <div class="post-block">
      <div v-for="(post,index) in posts" :key="post.slug + '_' + index">
        <router-link :to="'/blog/' + post.slug">
          <article class="media">
            <figure>
              <div class="posts"> 
                <img v-if="post.featured_image" :src="post.featured_image" alt="" style="max-width:25%;">
                <img v-else src="http://via.placeholder.com/250x250" alt="">
                <h2>{{ post.title }}</h2>
                <p>{{ post.summary }}</p>
              </div>
            </figure>
          </article>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import { **** } from '@/****'
  export default{
    name: 'blog_home',
    data() {
      return {
        bgImage: {
          backgroundImage: `url(${require( '@/assets/background.jpg')})`
        },
        posts: []
        }
      },
      methods: {
        getPosts() {
          ****.post.list({
            page: 1,
            page_size: 10
          }).then(res => {
            this.posts = res.data.data
          })
        }
      },
      created() {
        this.getPosts()
      }
  }
</script>

<style scoped>

  img {
    margin-top: 5em;
  }

  .bgImage {
    height: 100%;
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position:fixed;
    margin-top: 15px;
  }

  .blog_title {
    letter-spacing: 0px;
    font-size: 40px;
    color: rgb(252, 252, 252);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 500;
    line-height: 55px;
    margin-top: 250px;
    padding-right: 20em;
    text-transform: capitalize;
  }

  .post-block {
    height: 1000px;
    background-color: #f8f8f8;
    color: #151515;
  }

  p, h2 {
    color: #D3D3D3;
  }

</style>
评论