如何在角度中使用相对位置答案

【问题标题】：How to use the position relative in angular如何在角度中使用相对位置
【发布时间】：2022-01-12 13:12:36
【问题描述】：

我在另一个下拉菜单中有这个下拉菜单，但我想把第二个下拉菜单放在右边，我正在尝试在 scss 中使用相对位置

.bloco2{
  position: relative;
  margin-right: 200px;
}

但它仍然在同一个地方，并且 margin-top 有效

        <div ngbDropdown>
          <li ngbDropdownToggle>
            <a class="dropdown-item">
              <i class="bi bi-box mx-2"></i>
              Meus Editais
            </a>
          </li>
          <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="bloco2">
            <button ngbDropdownItem>•  Lista de Meus Editais</button>
            <button ngbDropdownItem>•  Propostas Cadastradas para o Edital</button>
            <button ngbDropdownItem>•  Avaliação Propostas do Edital</button>
          </div>
        </div>

      </div>
    </div>

【问题讨论】：

标签： html css angular drop-down-menu dropdown

【解决方案1】：

请尝试将position:absolute; 与left:xxx;top:yyy; 结合使用。

当使用 position:absolute 定位元素时，它会相对于最近的具有 position:relative 或 position:absolute 的父元素定位。

因此，在您的情况下，我建议将标识符（类或 id）添加到父元素并将其位置设置为相对。然后将您的 bloco2 类更改为绝对类。

<div ngbDropdown id="parentElement">

然后应用样式：

#parentElement {position:relative;}
.bloco2 {position:absolute; left:200px; top:100px}

注意：以上只是为了说明使用绝对定位的效果。您需要自己微调正确的值。

另外，您的 html 元素无效。您的

标签应该位于

或

。将这样的菜单项存放在无序列表中的常见做法如下所示： https://stackoverflow.com/questions/36811224/why-do-navigation-bars-in-html5-as-lists#:~:text=By%20using%20a%20ul%20%2C%20it's,all%20available%20navigation%20links%20and

编辑请看下面非常简单的例子：

<html>
<body>
<style>
  ul {width:100px}
  .level1 {position:relative;background-color:#f00;}
  .level1 ul {position:absolute;z-index:99;left:100px;}
  .level2 {background-color:#0f0;}
</style>
<ul>
  <li class="level1">Item 1</li>
  <li class="level1">Item 2</li>
  <li class="level1">Item 3
    <ul>
      <li class="level2">Sub item 1</li>
      <li class="level2">Sub item 2</li>
      <li class="level2">Sub item 3</li>
    </ul>
  </li>
  <li class="level1">Item 4</li>
</ul>
</body>
</html>

这演示了无序列表

标签进行绝对定位的。

【讨论】：

感谢 Dean O'Brien 的关注，很遗憾这不起作用，但感谢您的提示，当我修复它时，我会在这里回答您我是如何做到的
嗨，Gabriel，我已经用一个简单的例子更新了我的答案，展示了如何相对于另一个元素绝对定位某些东西。