pxを使わずに右側に整列した積み重ね/オーバーレイdiv

Question

divをヘルプボタンとして使用しています。ボタンはフロートを使用して右揃えになっています。
「popHelp」がポップアップすると、左側に揃えられます。
右側にどのように配置したらいいですか？
** @ =「popHelp」非表示をクリックして、私は相対的な使用しようとすると、ヘルプ

<div class="help3d"> 
    <div 
    @click="popHelp"> 
    <span>{{ helpLabel }}</span> 
    </div> 
    <div v-if="showHelp" id="popHelp"> 
    {{ helpL1 }} 
    </div> 
</div> 


.help3d { 
    display: inline-block; 
    float: right; 
    cursor: pointer; 
    border: 1 solid #000; 
    background-color: #c88; 
    position: static; 
} 
#popHelp { 
    position: absolute; 
    display: block; 
    right: auto; 
    top: auto; 
    z-index: 20; 
    background-color: #844; 
    color: #fff; 
    text-align: left; 
} 

を示し、popHelpは、その下の任意のdivを置換します。私はそれが

Answer 1

は、このCSSはあなたの問題を修正した場合、私はそれは良いです

.help3d { 
    display: inline-block; 
    float: right; 
    cursor: pointer; 
    border: 1 solid #000; 
    background-color: #c88; 
    position: relative; 
} 

#popHelp { 
    position: absolute; 
    display: block; 
    right: auto; 
    top: auto; 
    z-index: 20; 
    background-color: #844; 
    color: #fff; 
    text-align: left; 
    right: 0; 
} 

Answer 2

を知ってみましょう、それをオーバーレイします。右側はhelp3dの右側に揃えられています。しかし、左側はhelp3dの左側に揃えられています。私は左側が左に広がるようにしたい。 私は2つの "右"、1つの自動と1つの0に気づいた。

問題を解決するかもしれない正しい幅である3番目のdivを実行すると思います。

<div class="help3d"> 
    <div class="helpBtn" 
    @click="popHelp"> 
    <span>{{ helpLabel }}</span> 
    </div> 
    <div v-if="showHelp" id="popHelp"> 
    <div v-for="line in helpLines"> 
     <span>{{ helpL1 }}</span><br> 
    </div> 
    </div> 
</div> 

ここでは、help3d widthで再生します。
より後で
おかげ

Answer 3

は、このCSSはあなたの問題を修正した場合、私はあなたがpopHelpがページまたはhelp3dに対して整列残っているわけでください

#popHelp { 
    background-color: #844; 
    color: #fff; 
    display: block; 
    float: right; 
    right: auto; 
    text-align: left; 
    top: auto; 
    z-index: 20; 
}