使div出现但不向下移动后续元素 [英] Make a div appear but not move subsequent elements down

问题描述

我需要使div可见（为了使用它的背景），即使它不包含任何内容，但也不要向下推其他元素。

I need to make a div be visible (for use of it's background) even though it will not contain anything, but not push other elements down.

我的布局看起来像这样：

My layout looks like this:

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

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

The one labeled a needs to be visible but it will contain nothing. This is so the background image can make box b look like it has some gloss on the top, and box b will contain the text. However, the text in box b needs to start at the top of box a, not underneath it, which is the default behaviour.

因此，框 a 的行为就像它不存在一样就布局而言，但需要使用它作为背景图像使用。

So box a needs to act like it doesn't exist as far as layout goes, but needs to act like it exists for the purposes of background image.

为了演示，这是现在的样子，默认方式是：

To deomonstrate, this is what it looks like now, the default way:

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

但我希望成为

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

推荐答案

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

I think you need to set the original stacking context on a wrapper so both boxes are in the same contest, then you can put box a in box b and negative z-index box a

已更新：您无需将框放入框b一旦它们都处于相同的放样上下文中

updated: you don't need to put box in box b once they're both in the same staking context

这篇关于使div出现但不向下移动后续元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！