我想将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>