Question

我正在开发一个网站，希望在右上角出现一个自举吐司，但我希望该吐司出现在转盘上方，但吐司却移动了所有元素并留下了一个大的灰色区域，如图所示在图片中。

我希望它像https://getbootstrap.com/docs/4.3/components/toasts/放置部分中的示例一样悬停在内容上

这是我烤面包的代码：

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;" data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

我希望有人可以提供帮助：）

编辑：

为了澄清这是我想发生的事情（photoshopped）：

这就是正在发生的事情

完整代码如下：

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Handmade Studios</title>
  <meta name="description" content="Handmade Studios is an independent game, logo, web, video and sound design corporation.">
  <meta name="author" content="Alexander Hawking">

  <link rel="stylesheet" href="styles.css">


  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body style="background-color: #2D2D2D; font-family: 'Roboto', sans-serif;">
  <nav class="navbar navbar-expand-lg sticky-top navbar-dark" style="background-color: #212121;">
    <a class="navbar-brand" href="index.html" style="text-shadow: 0.2px 0 0 currentColor;">Handmade Studios</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#cards">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#dave">Dave</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div style="position: relative;">
    <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
      <div class="toast-header">
        <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>

    <div class="bd-example" style="padding-bottom: 2vw">

      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="logoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Logo Design</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="videoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Video Effects and Editing</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="musicslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Music Production</h1>
              <p>Check out my soundcloud</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="gameslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Game Design</h1>
              <p>Check out my itch</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="codeslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Web Design</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="photoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Photo Editing</h1>
              <p>Enquire below</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

  </div>

  <div class="container-fluid" id="cards">

    <div class="card-columns">
      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>sheen estevez</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Me, <cite title="Source Title">the creator</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="music.png" class="card-img-top" alt="music img">
        <div class="card-body">
          <h5 class="card-title">Music</h5>
          <p class="card-text">
            I am fairly new to music production but have put out a couple of tracks. I make mostly lofi so if you're into that go give them a listen and maybe even a like.
          </p>
          <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>The history of innovation is the story of ideas that seemed dumb at the time.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                                <cite title="Source Title">Andy Dunn</cite>
                            </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="code.png" class="card-img-top " alt="code img">
        <div class="card-body">
          <h5 class="card-title">Web Design</h5>
          <p class="card-text">
            I can code you a website, a chrome extension or anything you might need. I use javascript, jQuery, python 2 and 3, html, CSS, SCSS and SASS. If you would like a website or anything programmable contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a website</a>
        </div>
      </div>

      <div class="card" style="background-color: #702632">
        <blockquote class="blockquote card-body text-white">
          <p>The more you know, the less you don't know.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                        An inspirational human from <cite title="Source Title">terra australis</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="video.png" class="card-img-top" alt="video img">
        <div class="card-body">
          <h5 class="card-title">Video</h5>
          <p class="card-text">
            I have been editing videos for a number of years and can do everything from stop-motion to vfx and can do some basic 3D models. I use mainly after effects, premeire pro, stopmotion and various modelling programs. If you would like to me to help with your
            video project contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a video</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>I like smart jokes, I like dumb jokes, and I like dumb jokes done smartly.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                                <cite title="Source Title">Mike Myers</cite>
                            </small>
          </footer>
        </blockquote>
      </div>


      <div class="card text-white " style="background-color: #40434E;">
        <img src="logo.png" class="card-img-top" alt="logo img">
        <div class="card-body">
          <h5 class="card-title">Logos</h5>
          <p class="card-text">
            I can design a beautiful logo for your business. I use adobe illustrator and photoshop and can also edit any photos. If you're interested in a logo contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a logo</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>Grass grows, birds fly, sun shines, and brother, I hurt people.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Scout, <cite title="Source Title">TF2</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white" style="background-color: #40434E;">
        <img src="itch.png" class="card-img-top" alt="itch img">
        <div class="card-body">
          <h5 class="card-title">Games</h5>
          <p class="card-text">
            I have developed a number of games which are all available for download on itch.io. I have been developing games for about three years and have received over 1'200 downloads. All my games are available for free on itch but I won't complain if you want
            to donate.
          </p>
          <a href="https://alexanderhawking.itch.io/" class="btn btn-dark">My itch.io</a>
        </div>
      </div>

      <div class="card" style="background-color: #702632">
        <blockquote class="blockquote card-body text-white">
          <p>Here come the oct-train!</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Octane <cite title="Source Title">apex legends</cite>
                        </small>
          </footer>
        </blockquote>
      </div>


      <div class="card text-white" style="background-color: #40434E;">
        <img src="photo.png" class="card-img-top" alt="itch img">
        <div class="card-body">
          <h5 class="card-title">Photos</h5>
          <p class="card-text">
            I can edit your photos. Whether you just want a meme or a photo enhanced or edited I can help. If you want a photo edited contact me/
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a photo</a>
        </div>
      </div>

    </div>

  </div>

  <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="projects">
    <h1 class="display-4">Current Projects <span class="badge badge-pill" style="background-color: #702632;">New</span></h1>
    <p class="lead">Here are some of the current things that I am workng on</p>
    <hr class="my-4">
    <div class="card-deck">

      <div class="card border-1" style="background-color:#212121; ">
        <img src="abl.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Learning Ableton Live 10</h5>
          <p class="card-text">Ableton Live 10 is a hard to use but powerful DAW. I have been using it for around a month and have made a couple of tracks which are on my soundcloud. Feel free to check them out and give me some feedback.</p>
          <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
        </div>
      </div>

      <div class="card border-1" style="background-color:#212121; ">
        <img src="website.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">This Website</h5>
          <p class="card-text">This website is still currently a work in progress and is built with bootstrap, html, css and a little bit of jQuery. If you have any recommendations contact me.</p>
          <a href="contact.html" class="btn btn-dark">Contact</a>
        </div>
      </div>
    </div>

  </div>

  <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="dave">
    <h1 class="display-4">Dave</h1>
    <p class="lead" style="font-style: italic;">The incredible assistant</p>
    <hr class="my-4">
    <div class="card-deck">

      <div class="card border-1" style="background-color:#212121; ">
        <img src="dave.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-text">Dave is a text-based personal assistant for your terminal built entirely in python 3 with a little bit off apple script. Dave was built to serve and can currently search Wikipedia, get the weather, solve maths equations and tell jokes. Further
            updates will include more capabilities. There is currently no way to download Dave but if you would like him installed on your computer contact me. <br><br>If you interested in anything coding related I have a stack overflow where you can
            aks questions, see the ones I've asked and the ones I've answered</h5>
          <a style="margin-top: 1vw;" href="https://stackoverflow.com/users/9868018/alex-hawking" class="btn btn-dark">My Stack Overflow</a>
        </div>
      </div>
    </div>

  </div>


  <div class="container-fluid" style="background-color: #373639; padding-top: 1.5vw; padding-bottom: 1.5vw; color: #74767E">
    <h6 class="text-center" style="font-style: italic;">Designed by Alex Hawking in Australia : Handmade Studios
    </h6>
  </div>


  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script>
    $('.toast').toast('show');
  </script>
</body>

</html>

上面是最新的片段

Answer 1

您需要在外部元素上设置样式position: absolute; top: 0; right: 0;。并且它的容器应该是position: relative。

摘要：

$('#btn').click(function() {
  $('.toast').toast('show')
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div style="background-color:red; position: relative; width: 500px; height: 300px;">
  <button id="btn">Open</button>


  <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
      <strong class="mr-auto">Bootstrap</strong>
      <small class="text-muted">11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>

</div>

更新

确定转盘元素相对位置

<div class="bd-example" style="padding-bottom: 2vw; position: relative;">

然后在上面加烤面包。

摘要：

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Handmade Studios</title>
    <meta name="description"
        content="Handmade Studios is an independent game, logo, web, video and sound design corporation.">
    <meta name="author" content="Alexander Hawking">

    <link rel="stylesheet" href="styles.css">


    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body style="background-color: #2D2D2D; font-family: 'Roboto', sans-serif;">
    <nav class="navbar navbar-expand-lg sticky-top navbar-dark" style="background-color: #212121;">
        <a class="navbar-brand" href="index.html" style="text-shadow: 0.2px 0 0 currentColor;">Handmade Studios</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#cards">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#dave">Dave</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div style="position: relative;">
        <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
            <div class="toast-header">
                <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg"
                    preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
                <strong class="mr-auto">Bootstrap</strong>
                <small class="text-muted">11 mins ago</small>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>

        <div class="bd-example" style="padding-bottom: 2vw">

            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="logoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Logo Design</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="videoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Video Effects and Editing</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="musicslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Music Production</h1>
                            <p>Check out my soundcloud</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="gameslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Game Design</h1>
                            <p>Check out my itch</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="codeslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Web Design</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="photoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Photo Editing</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>

    <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="projects">
        <h1 class="display-4">Current Projects <span class="badge badge-pill"
                style="background-color: #702632;">New</span></h1>
        <p class="lead">Here are some of the current things that I am workng on</p>
        <hr class="my-4">
        <div class="card-deck">

            <div class="card border-1" style="background-color:#212121; ">
                <img src="abl.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Learning Ableton Live 10</h5>
                    <p class="card-text">Ableton Live 10 is a hard to use but powerful DAW. I have been using it for
                        around a month and have made a couple of tracks which are on my soundcloud. Feel free to check
                        them out and give me some feedback.</p>
                    <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
                </div>
            </div>

            <div class="card border-1" style="background-color:#212121; ">
                <img src="website.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">This Website</h5>
                    <p class="card-text">This website is still currently a work in progress and is built with bootstrap,
                        html, css and a little bit of jQuery. If you have any recommendations contact me.</p>
                    <a href="contact.html" class="btn btn-dark">Contact</a>
                </div>
            </div>
        </div>

    </div>

    <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="dave">
        <h1 class="display-4">Dave</h1>
        <p class="lead">The incredible assistant</p>
        <hr class="my-4">
        <div class="card-deck">

            <div class="card border-1" style="background-color:#212121; ">
                <img src="dave.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Dave is a text-based personal assistan for your terminal built entirely in
                        python 3 with a little bit off apple script. Dave was built to serve and can currently search
                        wikipedia, get the weather, solve maths equations and tell jokes. Further
                        updates will include more capabilities. There is currently no way to download Dave but if you
                        would like him installed on your computer contact me. <br><br>If you interested in anything
                        coding related I have a stack overflow where you can
                        aks questions, see the ones I've asked and the ones I've answered</p>
                    <a href="https://stackoverflow.com/users/9868018/alex-hawking" class="btn btn-dark">My Stack
                        Overflow</a>
                </div>
            </div>
        </div>

    </div>


    <div class="container-fluid"
        style="background-color: #373639; padding-top: 1.5vw; padding-bottom: 1.5vw; color: #74767E">
        <h6 class="text-center" style="font-style: italic;">Designed by Alex Hawking in Australia : Handmade Studios
        </h6>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script>
        $('.toast').toast('show');
    </script>
</body>

</html>

Answer 2

我遵循@zmag提到的方法，发现我的Toast显示在另一个元素后面。

这是我遇到的问题的图片 Toast displaying behind element

我发现通过在内部容器元素上设置z-index css属性可以解决此问题

<div class="toast" data-autohide="false" style="position: absolute;top: 0; right: 0; z-index:1;">

Z索引属性

z-index属性指定元素的堆叠顺序。

具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。 https://www.w3schools.com/cssref/pr_pos_z-index.asp

引导吐司移动所有元素

2 个答案:

Z索引属性