javascript - 相对于另一个对象对齐一个对象 Angularjs

Question

我使用 ng-show 和 ng-hide 开发了一个描述框，当我点击它时，它会在文本下方弹出。但问题是，描述框并没有准确显示在文本下方，如图中所示 .

我希望描述准确显示在 R2A 下。

这是我的代码:

HTML

<ion-content>


        <div class="contenu">
          <p>Salut</font><font size="4">, Welcome</font><font size="4">, Bienvenue chez </font><a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" style="font-size:180%; color:#B9121B">R2A</a><font size="4">...</font></p>
          <div ><font class="boxed" ng-show="collapsed"size="4" >I am description</font></div>

          <p> Nous sommes ton equipe de Welcomers, nous allons t'accompagner pour ta première journée.</p>
        </div>

</ion-content>

CSS

.collapsed {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

.contenu .boxed {
display: inline-block;
  padding:20px; 
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000;
  background-color: #FBC02D; 
}

Answer 1

首先，将 a 转换为 button，您可以将 boxed 元素放入链接中。现在，您可以相对于包含 R2A 文本的 button 元素定位 boxed 元素。

boxed元素应该有position: absolute;，所以它相对于没有位置static的第一个祖先定位.接下来，默认位置为 static 的 button 应该有 position: relative;。这意味着它相对于其默认位置定位。如果我们不指定 top、left 等，位置保持不变。 More here .

所以，html :

 ...
<button class="important-link" ng-model="collapsed" ng-click="collapsed=!collapsed">
    <span>R2A</span>
    <div class="boxed" ng-show="collapsed">
      I am Description
    </div>
  </button> 
 ...

还有CSS:

important-link {
  position: relative;
  background: none;
  border: none;
}

.important-link span {
  font-size: 30px;
  color: #B9121B;
}

.boxed {
  min-width: 100px;
  position: absolute;
  width: auto;
  top: 50px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #000;
  background-color: #FBC02D;
}

和here is a fiddle整个例子。

附言。建议不要在 HTML 中使用内联 CSS，例如 style="font-size:180%; ..

编辑

因此，如果您不想要某种“工具提示”效果，有两种解决方案。在第一个中，您将 margin-top 添加到下一个 div，这样描述框就不会与下面的文本重叠。您可以在 ng-style 上使用 ng-class 添加它，这样边距仅在显示描述框时适用。

第二种解决方案，在 button 元素内，文本 (R2A) 和描述都应该是 block 元素，以便它们位于另一个下方 ( block vs inline elements )。然后从装箱元素中删除 position: absolute(您还可以从父元素中删除 position : relative;)。

这是 updated fiddle .

这两种解决方案都存在一些局限性，因此您选择哪种取决于最终结果。您还可以使用 JS 来操作和定位 DOM 的元素。