如何在横幅顶部获取橙色栏，而不是在页面顶部 [英] How to I get Orange Bar on the top of my banner instead of on the top of the page

问题描述

我试图在我的HTML横幅顶部放置一个10px高度的橙色条。当我输入代码时，会显示橙色条，但它显示在窗口的顶部。我如何移动它，使其显示在HTML横幅的顶部？我想在十大Wi-Fi路由器横幅中看到它。

I'm trying to position a 10px height orange bar on the top of my HTML banner. When I put in the code the orange bar is displayed, but it's displayed on the top of the window. How do I move it so it's displayed on the top of the HTML banner? I'd like it in the "Top 10 Wi-Fi Routers" banner

查看我的jsfiddle： http://jsfiddle.net/hus​​kydawgs/tKn9f/77/

see my jsfiddle: http://jsfiddle.net/huskydawgs/tKn9f/77/

<div id="wrapper-landing">
<p>
    A Wi-Fi router is at the center of most people's home networks, but not every router is a good one. It's been a while since we last looked at the best Wi-Fi routers on the market, this week we want to take a fresh look and build a better top five list.</p>
    <div class="box-promo-row">
        <div class="box-promo-orange"></div>
            <h3>
                Top 10 Wi-Fi Routers</h3>
            <span class="box-promo-content">
                The last time we talked about Wi-Fi routers, 802.11ac wasn't really a thing yet, and now that it is and routers that support it have come down in price, it's time to take a fresh look. This week we want to know which routers you think offer the best combination of speed, range, features, customization options, and as always, bang for the buck.</span>
        </div>
</div>
</div>

#wrapper-landing {
    width: 916px;
    margin: 0 auto 50px auto;
    padding: 0;
}

#wrapper-landing p {
    color: rgb(102, 102, 102);
    font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
    font-size: 1.1em;
    line-height: 1.6em;
 }

.box-promo-row {
    width:893px;
    margin: 0;
    padding: 30px;
    border-left: 1px solid #e2e3e4;
    border-right: 1px solid #e2e3e4;
    border-bottom: 1px solid #e2e3e4;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #e2e3e4;
    box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}

.box-promo-row h3 {
    font-family:SegoeBold, Helvetica, Arial;
    font-size:1.3em;
    color:#2251a4;
    margin: 0 0 2px 0;
}

.box-promo-content {
    color: #616161;
    font-family: 'SegoeRegular',Helvetica,Arial,sans-serif;
    font-size: 1em;
    line-height: 1em;
}

.box-form-body {
    display: inline-block;
    width: 100%;
}


.box-promo-orange {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    background: #f66511;
    left: -1px;
    top: 0;
    z-index: 20px;
    border: 1px solid #f66511;
}

推荐答案

please update this code with your CSS and the orange line will come just above the header..

.box-promo-row {
    position:relative; /*Added this line*/
    width:893px;
    margin: 0;
    padding: 30px;
    border-left: 1px solid #e2e3e4;
    border-right: 1px solid #e2e3e4;
    border-bottom: 1px solid #e2e3e4;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #e2e3e4;
    box-shadow: 1px 2px 0px rgba (0,0,0,0.15);
}

.box-promo-row:before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 10px;
    background: #f66511;
    left: -1px;
    top: 0;
    z-index: 20px;
    border: 1px solid #f66511;
}

以下是工作演示。 http://jsfiddle.net/kheema/tKn9f/87/

这篇关于如何在横幅顶部获取橙色栏，而不是在页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！