我现在正在制作一个主页,彩色背景作为我的部分背景,背景图像作为我的“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>
最佳答案
看看我做的这个简单的原始示例,我希望这能给你一个想法。
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;
}
关于html - 如何在两个不同列的中间重叠一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32110276/