显示一个div，但不下移后续元素

Question

我需要使一个div是可见的(使用它的背景)，即使它将不包含任何内容，但不推其他元素。

我的布局是这样的:

/----------------a--------------------
|-------------------------------------|
|________________b____________________|

标记为a的需要是可见的，但它将不包含任何内容。这样，背景图像可以使框b看起来像它有一些光泽的顶部，框b将包含文本。但是，b框中的文本需要从a框的顶部开始，而不是在它下面，这是默认行为。

所以a框需要表现得像它不存在一样，就布局而言，但需要表现得像它存在的目的背景图像。

为了演示，下面是它现在的样子，默认方式:

/-------------------------------------
|-------------------------------------|
|       there is some text here       |
|_______and more text down here_______|

但是我希望它是

/-------------------------------------
|-------there is some text here-------|
|_______and more text down here_______|

Answer 1

CSS:

#box {
  position: relative; 
  z-index: 1; 
  width: 300px; 
  margin: 100px;
}
#boxa {
  position: absolute; 
  z-index: -1;
  top: -20px; 
  left: -10%; 
  width: 120%; 
  height: 50px; 
  background: #0f0;
}
#boxb {
  background: #eee; 
  height: 200px;
}

HTML:

<div id="box">
 <div id="boxa"></div>  
 <div id="boxb">text goes here</div>
<div>

我认为你需要在包装器上设置原始堆叠上下文，这样两个盒子都在同一个竞赛中，然后你可以将盒子a放在盒子b和负z索引盒子a

中

updated:你不需要把box放在box b中，因为它们都在相同的下注上下文中

参见工作示例:here &更新显示框不需要嵌套:这里

Answer 2

将top和left的值与position:absolute结合使用，将会从文档流中移除。

Answer 3

添加到div

的样式中

position:absolute;

Answer 4

<div style="Position:Absolute; Z-Index: (HIGH Number to appear ON TOP, Low number to be concealed) >
</div>

Answer 5

要么将背景设置为b(很简单，不知道为什么不这样做)，要么将a绝对放置在b中。

编辑:或者，就像clairesuzy说的，在b后面放一个，在同一个容器里

Answer 6

见下。您可以更改宽度/高度，以匹配您的背景图像的大小。

http://jsfiddle.net/DhS3D/4/

HTML…

<div id="b">
  <div id="a"></div>
  This is some text.
</div>

CSS…

#a {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 30px;
    background-color: #ccc;
}
#b {
    position: absolute;
    z-index: -2;
    width: 100%;
    height: 100px;
    background-color: #999;     
}

Answer 7

尝试使用绝对位置或相对位置，取决于它是什么