使用css重叠div定位

Question

图片中显示了4 divs。红色，绿色和蓝色。我希望蓝色div位于绿色div下方，其中包含＆＃34; JACKSON＆＃34;内容并且也不希望绿色div不会展开红色div。而且我也希望将蓝色div置于＆＃34; JACKSON＆＃34;文本。蓝色div将位于另一个divs上，例如蓝色z-index的{​​{1}}将具有比其他div更高的值。我想只用divs来做这件事。

  

注意：css没有Divs和width像素值。

Answer 1

如果您想将蓝色div与JACKSON div居中，则可以使用CSS3转换。使用此技术，无论绿色divs的大小如何，蓝色div都将居中（放置css前缀的其余部分）：

<强> HTML

<div class="red">
  <div class="green">
    DAVID
  </div>
  <div class="green">
    JACKSON
    <div class="blue">
      WHO IS DAVID AND JACKSON?
    </div>
  </div>
</div>

<强> CSS

.red, .green, .blue{
  box-sizing: border-box;
  display: inline-block;
  padding: 5px;
}

.red{
  border: 2px solid red;
}

.green{
  border: 2px solid green;
  position: relative;
}

.blue{
  border: 2px solid blue;
  display: block;
  position: absolute;
  transform: translate(-50%, 100%);
  left: 50%;
  top: 0;
  white-space: nowrap;
}

jsfiddle

Answer 2

你走了。我相信你可以弄清楚如何根据你的需要调整它。这是非常基本的CSS。

＆＃34;重叠＆＃34;的关键您的div将使用margin或position以及top，left，right或bottom CSS的组合属性。

＆＃13;

＆＃13;

.red, .green, .blue {border: solid 4px; display: inline-block;}
.red {border-color: red;}
.green {border-color: green; margin-bottom: 1em;}
.blue {border-color: blue;}
.blue {margin-left: 2em; position: relative; top:-1em;}

＆＃13;

<div class="red">
  <div class="green">David</div>
  <div class="green">Jackson</div>
</div>
<br />
<div class="blue">Who is David and Jackson?</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可能需要这样的东西吗？

.red {
  width: auto;
  display: inline-block;
  position: relative;
  padding: 5px;
  border: 2px solid red;
}

.green {
  width: auto;
  display: inline-block;
  vertical-align:top;
  padding: 5px;
  border: 2px solid green;
}
.blue {
  width: 35%;
  display: block;
  padding: 5px;
  border: 2px solid blue;
  margin-top: -10px;
  text-align:center;
  z-index:1;
  position:relative;
}

<div class="red">
  <div class="green">David</div>
  <div class="green">Jackson</div>
</div>
<div class="blue">Who are David and Jackson?</div>