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-index框a

更新：一旦他们处于相同的赌注环境中，您就不需要将框放入框b

参见工作示例：here＆amp;更新为显示框不需要嵌套：here

Answer 2

将此添加到该div的样式

position:absolute;

Answer 3

设置top和left值以及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上设置背景（简单，不知道为什么你不会），或绝对定位在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

尝试根据位置使用绝对或相对位置

使div显示但不会将后续元素向下移动

7 个答案:

参见工作示例：here＆amp;更新为显示框不需要嵌套：here