Question

我让这个布局试图逃离方形互联网，但我发现很难用Z-index重叠背景。 layout

到目前为止，我有这段代码：

<!--#############################################   
                   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&amp;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;
        }

我将图案放在包裹“contacts”的div中，而另一个div中的灰色图案包裹着“about”，但是它们没有重叠，所以它可以给人一种错觉，即这不是一个矩形。

还有另一种方法可以做到，或者我做错了吗？

提前谢谢！干杯

Answer 1

使用position:absolute代替亲戚，因为z-index不适用于亲戚。

这种布局可以在CSS中完成吗？

1 个答案: