将一个div居中于其他两个div上方

问题描述

我想实现这种情况:

该页面总共包含4个div.主层分为3格.在div1和div2上方，必须在这2个div的中间浮动另一个div(div4).

The page contains 4 divs in total. The main layer is divided in 3 divs.Above div1 and div2, another div(div4) must be floating above them in the middle of these 2 divs.

当前代码:

body {
position:relative;
}

div1 {
 // nothing
}

div2 {
 // nothing
}

div3 {
 // nothing
}

div4 {
 z-index: 10;
 position: absolute;
 top: 550px;
 left: 0;
 margin-left: auto;
 margin-right: auto;
 width: 50%;
 padding: 50px;
}

如果有人可以给我一个提示，我将不胜感激.

I would appreciate it if anyone could give me a heads up.

提前谢谢！

推荐答案

如果您的问题只是如何获得该布局，则可以这样做:

If your issue is just how to get that layout this can help:

* {
  margin: 0
}
html,
body {
  height: 100%;
}
div {
  height: 33.3%;
}
.one {
  background: red;
}
.two {
  background: green;
}
.three {
  background: blue;
}
.four {
  position: absolute;
  background: yellow;
  top: 17%;
  left: 30%;
  width: 40%;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

但这只是可视框，如果您有更多要求，可能会有些棘手.

But this is just visual boxes, if you have more requirements can be a little tricky.

这篇关于将一个div居中于其他两个div上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！