I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it disappeared. Here is the code snippet:
return (
<Alert
dismissible
show={this.state.show}
variant={variant}
onClose={this.handleClose}>
<div className='container'>
<Alert.Heading>{heading}</Alert.Heading>
<p className='alert-body'>{message}</p>
</div>
</Alert>
)
}
}
.alert {
align-items: center;
animation: .5s ease-in-out 0s 1 light-bounce-in;
bottom: 1rem;
display: flex;
// left: 0;
margin: auto;
max-width: 30rem;
position: absolute;
top: 30px;
left: 20px;
right: 20px;
// right: 0;
z-index: 1;
.alert-body {
margin: auto 0;
}
}
.close {
&:active,
&:focus {
outline: none;
}
}
@keyframes light-bounce-in {
0% {
opacity: 0;
transform: translateY(20%);
}
50% {
transform: translateY(-5%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}