Html 100%宽度内绝对定位相对定位div

我尝试将两个

img

元素绝对定位在一个

元素中。分支项目
应该具有
位置的元素：相对

当
.branch\u item
在
px
中具有
和
高度
时，一切正常，但我需要它们在
%
中，而不是
px
（因为此元素应具有100%的
宽度
）。
%
装置只能在
固定的位置工作，但不能在该位置

我的代码如下所示：

<div class="container left">
  <div class="twelve columns">
    <div class="branch_item">
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/bg_01.png" alt="" />
        </figure>
      </div>
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/de.act.png" alt="" />
        </figure>
      </div>
      <div class="csc-row">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/lx.act.png" alt="" />
        </figure>
      </div>
      <div class="csc-row csc-row-last">
        <figure class="csc-image csc-image-first csc-image-last">
          <img src="uploads/pics/pl.act.png" alt="" />
        </figure>
      </div>
    </div>
    <div class="twelve columns menu-bar">
    </div>
  </div>
</div>

当我在
.branch\u项目中设置
元素
宽度
和
高度
在
%
单元中时，我有一个空白页，没有任何内容

有人知道如何设置吗？
当您以百分比为单位设置宽度和高度时，它会相对于其父对象进行测量。
您是否在
上设置了高度和宽度？（不以百分比计）
如果不是，
.branch\u item
不能有百分比高度。
创建JSFIDLE，并期待一些帮助。我使用
基础框架
和
.seven
具有{width:100%；}是的，因此它具有流体高度。所以，如果您将.branch_项设置为100%高度，这是什么的100%？父元素没有高度。因此，它根本不会显示。好的，我明白-img元素应该扩展这个元素，但是如何定位图像-它们需要绝对定位，还是不需要？如果您只是试图将图像从左侧移动25%，为什么不将边距设置为左侧：25%；在他们身上？设置位置时：绝对；在图像上，它使它们脱离自然流动。容器需要它们在流动中提供高度。如果没有高度，你就没有什么可以定位的。不完全一样-图像应该处于相同的位置-一个在另一个之上-这就是为什么我使用
position:absolute
.branch_item {
  background: #ECECED; 
  position: relative;
  top: 50px; 
  left: 0;
  width: 100px;
  height: 100px;
}

.branch_item img {
  position:absolute; 
  top:0px; 
  left:25%; 
  width:50%;
}