时间戳

首页 > 解决方案 > Bootstrap toast 出现在元素后面

html - Bootstrap toast 出现在元素后面

问题描述

我有以下问题。我希望 toast o 出现在右下角并且可以正常工作，但它出现在其他文本后面：

吐司图片

这是我的代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<div class="toast" id="recipeLike" role="alert" aria-live="assertive" aria-atomic="true" auto-hide="false" data-delay="2000" style="position: fixed; bottom: 0; right: 0;">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-heart text-danger"></i> We miss you!</strong>
        <small>11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        <div>It's been a long time since you visited us. We've something special for you. <a href="#">Click here!</a></div>
    </div>
</div>

添加z-index：-1；不起作用，它会移动所有元素。我该怎么办，有什么建议吗？

谢谢。

标签： htmlcsstwitter-bootstraptoast

解决方案

推荐阅读