html - 100% 幅の相対配置 div 内の絶対配置

Question

あるはずimgの 1 つの要素内にいくつかの要素を絶対配置しようとしています。.branch_itemposition: relative

.branch_itemhaswithとheightinの場合はすべて正常に機能しますが、 notpxの場合は必要です(この要素には 100% が含まれている必要があるため)。ユニットは位置でのみ機能しますが、その位置にあることはできません。%pxwidth%fixed

私のコードは次のようになります:

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

ここに私のcssコードがあります：

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

.branch_item要素widthとユニットを設定するとheight、%何もない空白のページができます。

設定方法わかる人いますか？