Struggling to position my basic notification component in the top right corner. Here is my HTML:
<div class="notifications">
<p>{{ notification.message }}</p>
</div>
This is my notifications class:
.notifications {
position: relative;
right: 10px;
top: 10px;
width: 100px;
z-index: 1;
color: black;
padding: 5px;
background-color: red;
border-radius: 5px;
margin-bottom: 5px;
}
The notifications are showing up at the bottom left of the screen in this version https://jsfiddle.net/fb343fh6/
Here's another attempt:
.notifications {
position: fixed;
right: 10px;
top: 10px;
width: 100px;
z-index: 1;
color: black;
padding: 5px;
background-color: red;
border-radius: 5px;
margin-bottom: 5px;
}
In this version, the notifications correctly appear in the top right, but only one notification displays https://jsfiddle.net/762gg0bm/
Note - Using vue.js as my front end framework
Any help would be appreciated. Thank you!