如何让我的菜单块再次显示在横幅上？

Question

所以最初我的黑色菜单块的上半部分出现在横幅的顶部，但是现在它们的上半部分被切断了横幅，如下所示：

这是我的styles.css文件：

/* Base */

* {
    margin: 0;
    padding: 0;
}

body {
    /*background-color: #F5F4F1;*/
    background-image: url('./img/bg.jpg');
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #353535;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

#banner {
    position: relative;
}

#banner__text-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    text-align: center;
}

#banner__title {
    font-size: 5.8rem;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}


h1,h2,h3,h4,h5,h6 {
    margin: 30px 0;
    /*font-weight: 200;*/
    color: #8ca757;
}

h1 {
    font-size: 35px;
}

h1 small {
    font-size: 25px;
    color: #666;
}

h2 + p {
    margin-top: -20px;
}

h3 + p {
    margin-top: -20px;
}

h2,h3,h4 {
    font-size: 30px;
}

h4.error {
    color: #faa722;
}

h5,h6 {
    font-size: 20px;
}

p {
    margin: 0 0 20px;
}

a:link, a:visited {
    color: #8ca757;
}

a:hover {
    color: #7a9347;
}

ul, ol {
    margin: 0 0 10px 18px;
}

ul li, ol li {
    margin: 0 0 15px;
}

hr {
    border: none;
    height: 18px;
    width: 114px;
    background-image: url('./img/hr.png') center center no-repeat;
    margin: 20px auto;
}

small {
    font-size: 12px;
}

blockquote {
    background: white;
    padding: 10px;
    margin: 0 0 15px;
    border-left: solid 4px #d1cbb8;
    font-style: italic;
}

blockquote p {
    margin: 5px 0 10px;
}

blockquote code {
    font-style: normal;
}

code {
    color: #006699;
    font-weight: bold;
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

sup {
    font-size: 0.6em;
}

/* Layout */

.wrapper {
    position: relative;
    width: 620px;
    margin: 40px auto;
    padding: 40px;
    background: white;
    text-align: center;
}

.wrapper:before, .wrapper:after {
    content: "";
    position: absolute;
    top: 5px;
    left: -5px;
    width: 100%;
    height: 100%;
    background: #97917e;
    z-index: -1;
}

.wrapper:before {
    top: 10px;
    left: -10px;
    background: #514933;
}

#logo {
    width: 240px;
    margin: 0 auto;
    display: block;
}

.sandbox {
    padding: 20px;
    background: #f8f5f1;
    text-align: left;
}

aside {
    background: white;
    border: dashed 2px #97917e;
    padding: 10px 20px;
    margin: 40px;
}

aside h3 {
    font-size: 24px;
    margin-top: 10px;
}

aside h6 {
    margin: 15px 0 5px;
}

table {
    width: 100%;
    font-size: 13px;
    background: white;
    margin: 0 0 20px;
}

table td {
    border-bottom: solid 1px #d1cbb8;
    padding: 4px;
}

table th {
    background: #8ca757;
    color: white;
    padding: 4px;
    font-weight: normal;
    font-size: 15px;
}

/* Global */

input {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

autton, input.button {
    display: inline-block;
    background: #ccc;
    outline: solid 2px #ccc;
    border: solid 2px white;
    color: white;
    padding: 10px 15px;
    margin: 20px 0;
    text-decoration: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    cursor: pointer;
}

.button:hover, input.button:hover {
    background: #bbb;
    outline-color: #bbb;
}

.button.prev {
    float: left;
    background: #514933;
    outline-color: #514933;
}

.button.prev:hover {
    background: #494331;
    outline-color: #494331;
}

.button.next, input.button.next {
    background: #8ca757;
    outline: solid 2px #8ca757;
    float: right;
}

.button.next:hover, input.button.next:hover {
    background: #7c9745;
}

input.button.next {
    display: block;
    float: none;
    width: 100%;
}

.block {
    display: block;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.copyright-info h4, .copyright-info h5 {
    margin: 0;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
}

.copyright-info h4 {
    font-weight: bold;
}

.copyright-info {
    margin: 20px 0 40px;
}

/* Final example website */

#final-example .wrapper {
    width: 800px;
    padding: 0;
}

#final-example .content {
    padding: 20px 50px 50px;
    text-align: left;
}

#final-example #nav {
    margin: -27px 0 0;
}

#final-example #nav ul {
    display: inline-block;
    list-style: none;
    text-align: left;
}

#final-example #nav ul li {
    display: inline-block;
    text-align: center;
    margin: 0 10px;
}

#final-example #nav ul li a {
    display: block;
    background: #353535;
    outline: solid 2px #353535;
    border: solid 2px white;
    color: white;
    padding: 10px 15px;
    text-decoration: none;
}

#final-example #nav ul li a:hover {
    background: #8ca757;
    outline: solid 2px #8ca757;
}

#final-example #philosophy {
    text-align: center;
    font-size: 18px;
    line-height: 22px;
}

#final-example #footer {
    font-size: 12px;
    line-height: 15px;
    margin: 60px 0 0 0;
}

#final-example #footer strong {
    display: block;
    margin: 0 0 20px;
}

#final-example .column {
    display: block;
    float: left;
}

#final-example .column.three {
    width: 203px;
    margin-right: 45px;
}

#final-example .column.last {
    margin: 0;
}

#final-example small {
    display: block;
    text-align: center;
    margin: 40px 0 0;
}

#final-example .member {
    width: 203px;
    float: left;
    margin-right: 45px;
}

#final-example .member:last-child {
    margin: 0;
}

#final-example .member img {
    max-width: 100%;
}

#final-example .closed {
    color: #d13916;
}

#final-example .open {
    color: #67b512;
}

#menu-items ul {
    list-style: none;
    margin: 0;
    padding: 20px 0;
    text-align: center;
    font-size: 18px;
}

#menu-items ul li a {
    text-decoration: none;
    font-weight: bold;
}

.price {
    float: right;
    font-size: 18px;
    font-weight: bold;
    color: #353535;
}

#contact {
    width: 320px;
    margin: 0 auto;
}

#contact-form label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    border: solid 2px #353535;
    outline: none;
    font-size: 18px;
    padding: 10px;
    margin: 0 0 10px;
    width: 300px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
}

#contact-form textarea {
    resize: vertical;
    height: 120px;
}

#contact-form input[type="checkbox"] + label {
    display: inline;
    cursor: pointer;
}

当我尝试这样做时：

#final-example #nav {
    margin: -27px 0 0;
    position: absolute;
}

到这个

#final-example #nav {
    margin: -27px 0 0;
}

发生这种情况：

和text-align：center;不工作。有什么想法吗？

这是index.php：

<!DOCTYPE html>
<html>
<head>
    <title>MicroUrb</title>
    <link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
    <div class="wrapper">
        <div id="banner">
            <a href="/" title="Return to Home">
                <img src="assets/img/banner0.jpg" alt="MicroUrb">
                <div id="banner__text-content">
                    <h1 id="banner__title">MicroUrb</h1>
                </div>

            </a>
        </div><!-- banner -->

            <div id="nav">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="team.php">Team</a></li>
                    <li><a href="products.php">Products</a></li>
                    <li><a href="contact.php">Contact</a></li>
                </ul>
            </div><!-- nav -->

                <div class="content">
                    <div id="footer" class="cf">
                        <div class="column three">
                            <strong>Phone</strong>
                            609.505.3395
                        </div><!-- column -->
                        <div class="column three">
                            <strong>Location</strong>
                            <!-- location to go here -->
                        </div><!-- column -->
                        <div class="column three last">
                            <strong>Hours</strong>
                            <em>Tuesday - Thursday</em><br>
                            1:00pm - 9:00pm<br><br>
                            <em>Friday and Saturday</em><br>
                            4:00pm - 11:00pm<br><br>
                            <em>Sunday - Monday</em>
                            Closed<br><br>
                        </div><!-- column -->
                    </div><!-- footer -->
                    <small>&copy;2017 MicroUrb</small>
                </div><!-- content -->


    </div><!-- wrapper -->
    <div class="copyright-info">
        <?php includes('../assets/includes/copyright.php'); ?>
    </div><!-- copyright-info -->

</body>
</html>

Answer 1

我相信要在横幅前面进行导航，就像你想要实现的那样，你可以使用z-index property。

将z-index 1 #final-example #nav {}添加到z-index，将0 #banner {}添加到#final-example #nav { margin: -27px 0 0; position: absolute; z-index: 1; } #banner { position: relative; z-index: 0; } ，这会将导航放在前面横幅的同时保持其在中心的绝对位置。

最终结果将是：

{{1}}

如果您需要任何其他帮助，请与我们联系。

Answer 2

在导航上放置z-index并将位置设置为相对

#final-example #nav {
    margin: -27px 0 0;
    z-index: 5;
    position: relative;
}

Answer 3

如果将横幅设置为与nav元素相比较低的z-index，则可以在nav元素上使用z-index使其显示在横幅上方。

例如：

population

那就是说，如果你也发布你的html部分会很有用。

编辑：

进一步调查并使用临时资产，代码似乎与上面发布的代码一起工作正如在这个JSFiddle中可以看到的那样：https://jsfiddle.net/t2d70q3y/2/

如果您需要进一步的帮助，请与我们联系。