html - 如何在两个不同列的中间重叠一个元素？

Question

我现在正在制作一个主页，彩色背景作为我的部分背景，背景图像作为我的“about-left”div，位于该部分的左半部分，内容信息在右侧同一部分的一侧。我为其中的每一个制作了 6 个宽度的列，并且响应良好。

我有一个 Logo (.about-page-logo)，我想直接放在页面中间，两列相接处的接缝上方，还有一些我想放在顶部的文字页面 (.about-page-title)，也越过两列相交的地方。此外，向下翻页箭头需要穿过中间接缝 (.page-down-arrow)。我该怎么做？

<section id="about">    

  <div class="container-fluid">

    <div class="about-page-title">
      Anything that is seemingly impossible interests me.
    </div>

    <div class="about-page-logo">
      logo
    </div>

    <div class="page-down-arrow">
    </div>

    <div class="row">
      <div class="about-left col-lg-6">
      </div>

      <div class="about-content col-lg-6">
        <div class="about-content-title">
          <h1>I'M JAY.</h1>
        </div>

        <div class="about-content-info">
          <p>Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          <br /><br />

          Loren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsumLoren ipsum
          </p>
        </div>

        <div class="about-personal-info">
          <h4>Email:</h4>
          <h4>LinkedIn:</h4>
          <h4>GitHub:</h4>
          <h4>Angel List:</h4>
        </div>

      </div>
    </div>
  </div>
</section>

Answer 1

看看我做的这个简单的原始示例，我希望这能给你一个想法。

HTML 标记

<div class="wrapper">
    <div class="logo">LOGO</div>
    <div class="left">
        THIS IS LEFT
    </div>
    <div class="right">
        THIS IS RIGHT
    </div>
</div>

CSS

body, html {
    height: 100%;
}
.wrapper {
    position: relative;
    height: 100%;
}
.left, .right {
    float: left;
    width: 50%;
    text-align: center;
    height: 100%;
}
.left { background-color: yellowgreen; }
.right { background-color: olive; }
.logo {
height: 100px;
width: 100px;
background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

JSFIDDLE