Question

我正在尝试在HTML横幅的顶部放置一个10px高度的橙色条。当我输入代码时，会显示橙色条，但它会显示在窗口的顶部。如何移动它以便显示在HTML横幅的顶部？我喜欢它在“十大Wi-Fi路由器”横幅

中

请参阅我的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;
}

Answer 1

您必须在relative

上使用.box-promo-row定位

或

你根本不使用单独的元素并使用橙色边框？

.box-promo-now{

    border-top: 10px solid orange;

}

Answer 2

您的.box-promo-orange CSS应设置position: relative而不是absolute。绝对意味着它相对于整个页面定位它。相对于父容器的相对位置（在本例中为box-promo-row）。

Answer 3

请使用您的CSS更新此代码，橙色线将位于标题正上方..

.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/

Answer 4

使用

.box-promo-row {
    position: relative;
}

如何将橙色栏放在我的横幅顶部而不是页面顶部

4 个答案: