divのコンテンツにイメージを置く方法は？

Question

divの右側に私のロッカー画像を表示したいが、divのサイズとフォーマットを保っている。

私がロックしたときに、今何が起こるかです：：

そして、私はこのような何かをしたい：

はこれを行うには、デフォルトの状態だ

私はこのCSSを作った：

.imgCadenas{ 
    width: 100px; 
    height: 100px; 
    background: url('/cadenas.png'); 
    text-align: right; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

とHTMLは特別なものではありませんが、私はそれを置く：私はfloat:rightを使用する場合

<template name="machine"> 
    <li class="liMachine switch"> 
     <div id="nameMachine"> 
      <h3>{{nameMachine}}</h3> 
     </div> 
     <div id="stateMachine"> 
      State:<span class="state">{{stateMachine}}</span> 
     </div> 
     {{#if isLocked}} 
     <div> 
      <img class="imgCadenas"> 
     </div> 
     {{else}} 
      {{#if hideStopM}} 
      {{else}} 
       {{#if is_running_machine}}<i class="fa fa-spinner fa-spin"></i> 
      {{else}}<button type="button" class="stop {{#if to_hide_stopM}}hidden{{/if}}"></button> 
      {{/if}} 
      {{/if}} 

      {{#if hideKillM}} 
      {{else}} 
      {{#if is_alive_machine}}<i class="fa fa-spinner fa-spin"></i> 
       {{else}}<button type="button" class="kill {{#if to_hide_stopM}}hidden{{/if}}"></button> 
      {{/if}} 
      {{/if}} 

      {{#if is_stopped_machine}}<i class="fa fa-spinner fa-spin"></i>{{else}}<button type="button" class="start {{#if to_hide_startM}}hidden{{/if}}"></button>{{/if}} 
     {{/if}} 
    </li> 
</template> 

私が働いている部分が{{#if isLocked}}

私が持っている：

を

設定ソリューションを使用するとき：

私は、@のthis.believerのソリューションを使用します。

Answer 1

を以下を追加します例えばセット位置を有するポジション：相対;

.imgCadenas{   
    position: absolute; 
    top: 4px; 
    right: 4px; 
} 

Answer 2

を私は次のようにdiv要素の位置を編集して、必ず親のdivになるだろう

.imgCadenasクラスに

float: right; 

Answer 3

位置を定義した場合の相対

.liMachine{ 
    list-style:none; 
    position:relative; 
} 

として、問題を解決します画像上postionを相対フロートを使用し、維持

.imgCadenas{ 
    width: 100px; 
    height: 100px; 
    background: url('/cadenas.png'); 
    text-align: right; 
    background-repeat: no-repeat; 
    background-size: 100%; 
/* Add following css */ 
position:absolute; 
    top:0px; 
    right:0px; 
} 

Answer 4

画像のための李。

img { 
 
    postion: relative; 
 
    float: right; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li id="hello"> 
 
     <a href="home.php"><img src="http://zdnet3.cbsistatic.com/hub/i/2015/09/01/cb834e24-18e7-4f0a-a9bf-4c2917187d3f/83bb139aac01023dbf3e55a3d1789ad8/google-new-logo.png"></a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 5

あなたのCSSクラスにこれを追加します。

.imgCadenas{ 
    z-index:5; 
    position: absolute; 
    right:/*some px/vw from the right side*/; 
    top:/*some spx/vh from the top*/; 
    bottom:/*same as above if vertically centered*/; 
    left:auto; 
    width:auto; 
    height:auto; 
} 

.liMachine{ 
    position: relative; 
}