html - 两个绝对 -ley 定位元素之间的边距

Question

我有两个 absolute -ley 定位的容器，像这样...

HTML

<div class=title_container>
   <div class=title>Variable length title</div>
   <div class=title_bg></div>
</div>

<div class=description_container>
   <div class=description>Also variable length description</div>
   <div class=description_bg></div>
</div>

CSS

.title_container {
  position:absolute
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

.description_container {
  position:absolute
}
  .description {
    position:relative; z-index:1;
    color:#FFF;
  }
  .description_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

为了使透明背景宽度和高度与可变长度文本相匹配，两个容器都必须设置为绝对位置。

现在我需要设置两个容器之间的边距，但我不能只设置容器的顶部参数，因为文本长度可以变化，这意味着如果文本长于一行，透明背景将重叠。

在这种情况下，如何在两个容器之间设置固定的 20 像素边距？

http://jsbin.com/IyUZUg/2/

Answer 1

在两个设置为绝对位置的容器周围添加一个包装器。然后你可以通过包装器控制你的绝对位置。然后容器将漂浮(如果需要)并排堆放。如果您希望它彼此重叠，请移除 float 。

    <div id="contentwrapper">
<div class=title_container>
   <div class=title>Variable length title</div>
   <div class=title_bg></div>
</div>

<div class=description_container>
   <div class=description>Also variable length description</div>
   <div class=description_bg></div>
</div>
</div>

CSS

#contentwrapper{
  position:absolute;
  top: 0;
    left: 0;
}

.title_container, .description_container{
    float: left;
}


.title_container{
   padding-right: 20px;
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }


  .description {
    position:relative; z-index:1;
    color:#FFF;
  }
  .description_bg {
    position:absolute; top:0; left:0;
    background:#0000FF; 
    opacity:0.50;
    width:100%; height:100%;
  }

fiddle

http://jsfiddle.net/hn2HY/9/