[Navbar下拉项在单击时被移动

Question

我正在尝试设置一个导航栏，其中包含向右对齐的多个项目。

问题是，当我单击“通知”图标时，显示了我的下拉菜单，但是我的图标在导航栏中移动而不是保持固定，我不明白为什么

这是我的代码：

HTML：

<nav class="navbar navbar-expand-lg navbar-dark bg-secondary justify-content-end">
  <ul class="navbar-nav menu-right">
    <div class="child child-right">    

      <!-- Parameters item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-cog"></i>
          <span class="badge-sonar"></span>
        </a>
        <div class="dropdown-menu parametres" aria-labelledby="dropdownMenuMessage">
          <a class="dropdown-item" href="#">My profile</a>
          <a class="dropdown-item" href="#">Help</a>
          <a class="dropdown-item" href="#">Setting</a>
        </div>
      </li>

      <!-- Notifications item -->
      <li class="nav-item">
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-bell"></i>
        </a>
        <div class="dropdown-menu notifications" aria-labelledby="dropdownMenuMessage">
          <div class="notifications-header">
            <i class="fa fa-bell"></i>
            Notifications
          </div>

          <!-- Notification content -->
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">
            <div class="notification-content">
              <div class="icon">
                <i class="fas fa-check text-success border border-success"></i>
              </div>
              <div class="content">
                <div class="notification-detail">Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. In totam explicabo</div>
                <div class="notification-time">
                  6 minutes ago
                </div>
              </div>
            </div>
          </a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item text-center" href="#">View all notifications</a>
        </div>

      </li>
    </div>

  </ul>
</nav>

SASS：

.navbar {
    overflow: visible;
    height: 56px;
    z-index: 9999;
}

.notifications {

    max-width: 250px;
    margin-left: -200px;
    margin-top: 5px;


    .dropdown-item {
        padding: .25rem 1rem;
    }

    .notifications-header {
        padding: 0 1rem;
    }

    .notification-content {
        display: flex;

        .icon {
            width: 40px;
            height: 40px;

            i {
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
            }
        }

        .content {
            line-height: 1.6;
            padding-left: 5px;
            width: calc(100% - 40px);

            .notification-time {
                font-size: .7rem;
                color: #828282;
            }

            .notification-detail {
                font-size: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.child {
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 0;
    justify-content: flex-start;
    align-items: stretch;
}

.child.child-right {
    flex-grow: 1;
    justify-content: flex-end;
}

.child>li{
    padding-right: 50px;
}

和jsfiddle：https://jsfiddle.net/kiuega/beat2zmn/11/有人可以帮我吗？

Answer 1

检查边界和填充（在儿童中）与检查元素进行检查，并查看女巫元素更改其位置