如何将图片放在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并不特殊，但我把它放在了：

<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}}

当我使用float:right我有：

当我使用设置position: absolute;top:0px..的解决方案时position: absolute;top:0px.. ：

当我使用@ this.believer的解决方案时：

Answer 1

如果li是相对的，则定义位置

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

和图像

.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 2

将以下内容添加到.imgCadenas类

float: right;

Answer 3

我将按如下方式编辑div的位置，并确保父div也具有一个设置位置，例如position：relative;。

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

Answer 4

使用float并在图像上保持相对位置将解决此问题。

 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;
}