I have attempted setting all the parent elements to relative and this specific one to absolute, but it doesn't seem to be working. I'm quite puzzled at this point, here is the code snippet:
<template>
<div>
<div @mouseover="showList = true">
<slot></slot>
</div>
<v-card class="login-container elevation-12" v-if="showList">
<div>Some partner IDS</div>
<div>Some partner IDS</div>
<div>Some partner IDS</div>
<div>Some partner IDS</div>
<div>Some partner IDS</div>
</v-card>
</div;
</template>
<script>
export default {
name: "DiseaseIDs",
data: ()=> ({
showList: false
}),
methods: {
}
}
</script>
<style>
.login-container {
position: absolute;
padding: 20px;
top: 50%;
right: 50%;
z-index: 999;
float: left
/*transform: translate(-50%, -50%);*/
}
</style>
The actual display of this code resembles the image in this link: https://i.sstatic.net/wMY6N.png