两个 ablosute -ley 定位元素之间的边距

Question

我有两个绝对 -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%;
  }

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

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

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

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

Answer 1

在这种情况下，我实际上可以使用相对位置，但使用内联块技巧。

HTML

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

<br>

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

CSS

.title_container {
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}
  .title {
    position:relative; z-index:1;
    color:#FFF;
    max-width:200px;
  }
  .title_bg {
    position:absolute; top:0; left:0;
    background:#0000FF;
    opacity:0.50;
    width:100%; height:100%;
  }

.description_container {
  position:relative;
  display:inline-block;
  margin-bottom:20px;
}
  .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%;
  }

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

Answer 2

在两个设置为绝对位置的容器周围添加一个包装器。然后你可以通过包装器控制你的绝对位置。然后将容器浮动（如果需要）并排堆叠。如果你想把它放在一起，去掉浮动。

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

小提琴

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