这个布局能在CSS完成吗？
Can this layout be done in CSS?
我制作此布局试图 运行 远离正方形互联网，但我发现很难使用 Z-index 来重叠背景。
到目前为止我有这个代码：
<!--#############################################
ABOUT
##################################################-->
<div id="about" class="about margin-top ">
<div class="background-about">
<div class="container ">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>About us</h2>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<img class="img-responsive" src="img/unlogical_logo_imagens.png"/>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-7">
<p>Dia 22, às 2h </b><br>Hoje é dia de festea, é o teu aniversário gosto muito de aniversario festa é muito bom tão bom que vou cagar, e prontos em vez de colocar lorem ipsion imporum gravidaet enio coiso e tal vai sobre uma festaDia 22, às 2h levar piças na mão </b><br>Hoje é dia de festea, é o teu aniversário gosto muito de aniversario festa é muito bom tão bom que vou cagar, e prontos em vez de colocar lorem ipsion imporum gravidaet enio coiso e tal vai sobre uma festaDia 22, às 2h </b><br>Hoje é dia de festea</p>
</div>
</div>
</div>
</div>
</div>
<!--#############################################
CONTACTS
##################################################-->
<div id="contacts" class="contacts margin-bottom ">
<div class="background-contacts fadeInDown">
<div class="container">
<div class="row">
<div class="col-md-offset-8 col-md-4">
<h2>Get in Touch</h2>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h4 class="text-center">info@unlogical.uk</h4>
<form action="form_process.php" method="post" name="contact_form">
<h5>Nome*</h5> <input name="nome" type="text"/>
<h5>E-mail*</h5> <input name="email" type="text"/>
<h5>Mensagem*</h5> <textarea name="mensagem"></textarea>
<h5><input name="Enviar" class="btnenviar" type="submit" value="Enviar">
</h5>
</form>
<div class="row">
<div class="col-md-12 ">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="//unlogical.us10.list-manage.com/subscribe/post?u=83f9f68950845e6c634dd8200&id=82cabd68de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p>Subscribe our Newsletter</p>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group input-group">
<strong>Email Format </strong>
<ul><li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0">Normal</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1">Only text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_83f9f68950845e6c634dd8200_82cabd68de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btnenviar"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-5">
<iframe width="550" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Lisboa%2C%20Portugal&key=AIzaSyAgl9y77GTrQ5NMnggxIiAZAodYOYEThvM">
</iframe>
<div class="row social_icons">
<div class="col-md-2">
<a href=""><img src="img/facebook.png" width="32" height="32" alt="Facebook UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/youtube.png" width="32" height="32" alt="Youtube UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/google.png" width="32" height="32" alt="Google+ UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/twitter.png" width="32" height="32" alt="Twitter UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/resident_advisor.png" width="32" height="32" alt="Resident Advisor UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/instagram.png" width="32" height="32" alt="Instagram UNlogical"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(grey background with shape)
.background-about {
padding-top: 150px;
padding-bottom: 150px;
background: url(../img/aboutbackground.png) no-repeat center ;
background-size: cover;
position: relative;
z-index: 3;
}
(the pattern on the left)
.background-contacts {
position: relative;
padding-top: 50px;
background: url(../img/texture.png) no-repeat -100px -450px;
z-index: 2;
}
我将图案放置在 div 包裹 "contacts" 中，灰色图案放置在另一个 div 包裹 "about" 中，但它们不重叠，因此它会给人一种这不是矩形的错觉。
还有其他方法吗，还是我做错了？
提前致谢！
干杯
使用 position:absolute 而不是 relative，因为 z-index 不能与 relative 一起使用。
我制作此布局试图 运行 远离正方形互联网，但我发现很难使用 Z-index 来重叠背景。
到目前为止我有这个代码：
<!--#############################################
ABOUT
##################################################-->
<div id="about" class="about margin-top ">
<div class="background-about">
<div class="container ">
<div class="row">
<div class="col-md-offset-9 col-md-3">
<h2>About us</h2>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<img class="img-responsive" src="img/unlogical_logo_imagens.png"/>
</div>
</div>
<div class="row">
<div class="col-md-offset-5 col-md-7">
<p>Dia 22, às 2h </b><br>Hoje é dia de festea, é o teu aniversário gosto muito de aniversario festa é muito bom tão bom que vou cagar, e prontos em vez de colocar lorem ipsion imporum gravidaet enio coiso e tal vai sobre uma festaDia 22, às 2h levar piças na mão </b><br>Hoje é dia de festea, é o teu aniversário gosto muito de aniversario festa é muito bom tão bom que vou cagar, e prontos em vez de colocar lorem ipsion imporum gravidaet enio coiso e tal vai sobre uma festaDia 22, às 2h </b><br>Hoje é dia de festea</p>
</div>
</div>
</div>
</div>
</div>
<!--#############################################
CONTACTS
##################################################-->
<div id="contacts" class="contacts margin-bottom ">
<div class="background-contacts fadeInDown">
<div class="container">
<div class="row">
<div class="col-md-offset-8 col-md-4">
<h2>Get in Touch</h2>
</div>
</div>
<div class="row">
<div class="col-md-5">
<h4 class="text-center">info@unlogical.uk</h4>
<form action="form_process.php" method="post" name="contact_form">
<h5>Nome*</h5> <input name="nome" type="text"/>
<h5>E-mail*</h5> <input name="email" type="text"/>
<h5>Mensagem*</h5> <textarea name="mensagem"></textarea>
<h5><input name="Enviar" class="btnenviar" type="submit" value="Enviar">
</h5>
</form>
<div class="row">
<div class="col-md-12 ">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="//unlogical.us10.list-manage.com/subscribe/post?u=83f9f68950845e6c634dd8200&id=82cabd68de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<p>Subscribe our Newsletter</p>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group input-group">
<strong>Email Format </strong>
<ul><li><input type="radio" value="html" name="EMAILTYPE" id="mce-EMAILTYPE-0"><label for="mce-EMAILTYPE-0">Normal</label></li>
<li><input type="radio" value="text" name="EMAILTYPE" id="mce-EMAILTYPE-1"><label for="mce-EMAILTYPE-1">Only text</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_83f9f68950845e6c634dd8200_82cabd68de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btnenviar"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<div class="col-md-offset-1 col-md-5">
<iframe width="550" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Lisboa%2C%20Portugal&key=AIzaSyAgl9y77GTrQ5NMnggxIiAZAodYOYEThvM">
</iframe>
<div class="row social_icons">
<div class="col-md-2">
<a href=""><img src="img/facebook.png" width="32" height="32" alt="Facebook UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/youtube.png" width="32" height="32" alt="Youtube UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/google.png" width="32" height="32" alt="Google+ UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/twitter.png" width="32" height="32" alt="Twitter UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/resident_advisor.png" width="32" height="32" alt="Resident Advisor UNlogical"/></a>
</div>
<div class="col-md-2">
<a href=""><img src="img/instagram.png" width="32" height="32" alt="Instagram UNlogical"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
(grey background with shape)
.background-about {
padding-top: 150px;
padding-bottom: 150px;
background: url(../img/aboutbackground.png) no-repeat center ;
background-size: cover;
position: relative;
z-index: 3;
}
(the pattern on the left)
.background-contacts {
position: relative;
padding-top: 50px;
background: url(../img/texture.png) no-repeat -100px -450px;
z-index: 2;
}
我将图案放置在 div 包裹 "contacts" 中，灰色图案放置在另一个 div 包裹 "about" 中，但它们不重叠，因此它会给人一种这不是矩形的错觉。
还有其他方法吗，还是我做错了？
提前致谢！ 干杯
使用 position:absolute 而不是 relative，因为 z-index 不能与 relative 一起使用。