如何在橫幅頂部獲取橙色條而不是在頁面頂部

我試圖在我的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; 
}

來源

2014-03-06 user3075987

你似乎有一個額外的結束div在你的小提琴，但我不相信這是關係到你的問題......我也可能會丟失你問什麼，但你在你的.box-promo-orange css中有絕對的位置 – user3334690

我想我現在明白了。 http://jsfiddle.net/huskydawgs/tKn9f/84/ – user3075987

請更新此代碼與你的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/

來源

2014-03-06 19:47:07

您的工作演示不起作用。 – user3075987

感謝您的更新。我已更正鏈接，請檢查。 –

該Demo適合你嗎？ –

你.box-promo-orange CSS應該設置position: relative而不是absolute。絕對意味着它將它定位在整個頁面上。它相對於父容器的相對位置（在這種情況下爲box-promo-row）。

來源

2014-03-06 19:42:13 computmaxer

你不得不使用上.box-promo-row

或

你不使用單獨的元件relative定位在所有和使用橙色邊框？

.box-promo-now{ 

    border-top: 10px solid orange; 

}

來源

2014-03-06 19:46:17

使用

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

來源

2014-03-06 20:25:24 Iqbal

如何在橫幅頂部獲取橙色條而不是在頁面頂部

回答

相關問題