Why 'v-show' command affect the html normal layout (the div's position has changed unexpected)

Issue

I want to implement custom components, like the following picture:

ps: It's actually a component of an element(https://element.eleme.io/#/en-US/component/upload).

when I move my mouse on the picture, it shows a translucent background.

So I write the code:

<div id="app">
  <div>
    <div class="container" v-for="n in arr.length" :key="n">

      <!-- unexpected result -->  
      <div v-show="arr[n-1]" >test</div>  
      
    </div>
  </div>
</div>

the result is :

the middle yellow div with 'test' string is off the bottom. It's unexpected.

the following picture is the expected result:

I just set the position of the div, it worked!

<div v-show="arr[n-1]" style="position:absolute; top:0">test</div>

Why do I have to set this style to get the correct result?

check it in https://jsfiddle.net/uzvhq2jw/

Solution

To achieve expected result, use vertical-align: top; for the container

.container{
  width:200px;
  height:200px;
  background:yellow;
  margin:10px;
  display:inline-block;
  vertical-align:top;
}

Issue: Inline block element with content will be moved down due to its default vertical-align property as baseline

working code for reference
codepen - https://codepen.io/nagasai/pen/LwRYPm

new Vue({
  el: "#app",
  data: {

    arr: [false, true, false]
  },
  methods: {}
})

.container {
  width: 200px;
  height: 200px;
  background: yellow;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div class="container" v-for="n in arr.length" :key="n">

      <!-- unexpected result -->
      <div v-show="arr[n-1]">test</div>

      <!-- expected -->
      <!-- <div v-show="arr[n-1]" style="position:absolute; top:0">test</div> -->


    </div>
  </div>
</div>

Answered By - Naga Sai A