オブジェクトを別のオブジェクトに相対的に配置する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要素をリンク内に配置することができます。 boxed要素は、R2Aテキストを含むbutton要素に対して配置できます。

boxed要素は、staticを持たない最初の祖先に相対的な位置になるように、position: absolute;になる必要があります。次に、デフォルトで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。

PS。あなたが2つの解決策がある「ツールチップ」効果のいくつかの種類をしたくない場合は、だから、

編集style="font-size:180%; ..

ようなあなたのHTMLにインラインCSSを使用しないことをお勧めします。 最初の例では、margin-topを次のdivに追加して、説明ボックスが下のテキストと重ならないようにします。 ng-styleにng-classと追加することができるので、説明ボックスが表示されている場合にのみ余白が適用されます。

button要素の中の2番目の解決策では、テキスト（R2A）と説明はブロック要素である必要があります。 そしてボックス化された要素からposition: absoluteを削除します（親からposition : relative;も削除できます）。

ここにはupdated fiddleがあります。

両方の解決策にはまだいくつかの制限があります。そのため、選択するものは最終結果によって異なります。 JSを使用して、DOMの要素を操作して配置することもできます。

Answer 2

ちょうど別のdiv要素にこれらの要素の両方を置くとの間で休憩を追加<br>：

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

またはspanに入れてください。

マージンも同様にしてください。