javascript - 我们如何将两个响应式和卡住的图片与 z-index 放在一起？

Question

所以我必须在我的网站上像这个例子一样图片 ，我在 CSS 文件中用 z-index 做了这个，我有一个问题，当我缩小浏览器页面时，两张图片没有粘在一起，它们之间有一种空白。那么当我缩小我的浏览器页面时，如何才能让响应式图片和粘在一起呢？

Vue.component('carousel', {
    template: `
        <div class="card-carousel" >
            <div class="thumbnails">
               
                <div 
                v-for="(image, index) in images" 
                :key="image.id" 
                :class="['thumbnail-image', (activeImage == index) ? 'active' : '']" 
                @click="activateImage(index)"> 
                <img :src="image.thumb" class="active"/>
                   
                </div>
            </div>
            <div class="containe-carousel">

                <span id = "textespan"> {{currentImage.text}}</span>
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    
            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                   

            </div>
            </div>
        </div>
    `,
    computed: {

        currentImage() {
            return this.images[this.activeImage];
        },

        currentImage2() {
            return this.images[this.activeImage];
        }
     
    },

        data() {
            return {
                activeImage: 0,
            
            }
        },

        methods: {     
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            },  
            
        
        },
    
        props: ['images']
    });

.section{
    background-color: black;
}

.card-carousel {
    user-select: none;
    position: relative;
}

.containe-carousel {
    padding-top: 5%;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;

}

.thumbnail-image {
    display: fixed;
    align-items: center;
    cursor: pointer;
    padding: 2px;

}

.thumbnail-image > img {
    width: 100%;
    height: auto;
    transition: all 250ms;
    filter:  grayscale(100%);

}

.thumbnail-image:selected> img {
    box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
    visibility: hidden;
    filter: none;
}


.card-img {
    position: relative;
}

 .card-img > img {
    margin: 0 auto;
    padding-top: 7%;
    z-index: 2; 
}

 .photoshop-screenshot {
    position:absolute;
    z-index: 1;
    width: 70%;
    right:-80px;
    bottom:-130px;
   
}

.active{ 
    filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ; 

}

#textespan {
    text-align: center;
}

.containe-carousel span {
    
    color: white;
    font-weight: bold;
}

                 
        <section class="section" id="app">
            <div class="container">
                <div class="text-center" style="margin:0px 50px">
                    <div class="heading-underscore">
                        <h2 class="dk-5q-color">
                             <?php say("X50Q-dashboard-title"); ?>
                         </h2> 
                    </div>
                    
                </div>
                <div class="columns">
                     <div class="column "> 
                        <div class="card-content">
                            <carousel
                                :starting-image="0"
                                :show-progress-bar="true"
                                :images="images"     
                            ></carousel>
                    
                        </div>   
                    </div> 
                </div>
            </div>            
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() { 
                
                return {
                    images: [
                       
                        {
                            text : 'Photoshop',
                            id: '1',
                            big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
                            big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
                        },
                        {
                            text : 'Aurocad',
                            id: '2',
                            big: '/images/das-keyboard-x50q/autocad-profile.png',
                            big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/autocad-logo.png'
                        },
                        {
                            text : ' Counter-Strike',
                            id: '3',
                            big: '/images/das-keyboard-x50q/counterstrike-profile.png',
                            big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
                            thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
                        },
                        {
                            text : 'League of Legends',
                            id: '4',
                            big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
                            big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
                        }
                    ],
                    
                
                }
            }
        });
    </script>

Answer 1

运行代码并调整大小 -> 展开代码段并调整窗口大小。

查看这段代码:

.container {
    position: relative;
    display: inline-block;
}
.wrapper {
  padding-right: 30%;
}
.wrapper2 {
    position: absolute;
    bottom: -40%;
    width: 100%;
}
.first {
    max-width: 100%;
}

.last {
    float: right;
    max-width: 50%;
}

<div class="container">
        <div class="wrapper">
            <img src="/image/JCQ2g.jpg" class="first">
        </div>
        <div class="wrapper2">
            <img src="/image/yqoSo.jpg" class="last">
        </div>
    </div>