Javascript sweetaler2目标选择-仍在目标外游泳

我尝试了target opt-in-sweetalert2，但是吐司仍然出现在target之外

我做错了什么

这是密码

#trial {
    position: absolute;
    display: block;
    height:200px;
    width: 500px;
    border: 1px solid;
}

<div id="trial"></div>

<script>
$(document).ready(function() {
    var id = document.getElementById('trial');
    Swal.fire({
        title: 'I will be placed inside the #swal2-container',
        toast: true,
        target: id,
        position: 'bottom-left'
    });
}); 
</script>

#试用{
位置：绝对位置；
显示：块；
高度：200px；
宽度：500px；
边框：1px实心；
}
$（文档）.ready（函数（）{
var id=document.getElementById（'trial'）；
喷火({
标题：“我将被放置在#swal2容器”中，
吐司：是的，
目标：id，
位置：'左下'
});
}); 

结果如下：

---

使用

target

属性，只需将DOM容器

.swal2容器

附加到目标元素，但它有一个

位置：fixed样式，您需要按如下方式覆盖它：


$（文档）.ready（函数（）{
var id=document.getElementById（'trial'）；
喷火({
标题：“我将被放置在#swal2容器”中，
吐司：是的，
目标：id，
位置：'左下'
});
});
#试用{
位置：相对位置；
左：50px；
显示：块；
高度：200px；
宽度：500px；
边框：1px实心；
}
.swal2集装箱{
位置：绝对！重要；
}
非常感谢您的快速响应和简单解释，效果很好：D，再次非常感谢您