Ich hätte gerne ein kleines rotes Div mit voller Breite an einer festen oberen Position in einem anderen Div, das hatoverflow: scroll. Ich hoffe die jsFiddle macht es klar:http://jsfiddle.net/mCYLm/2/.

Das Problem ist, dass das rote Div die Bildlaufleiste überlappt. ich vermuteright: 0 bedeutet die rechte Seite vondiv.wrapper; Es subtrahiert nicht die Bildlaufleiste vondiv.main. Wenn ich das bewegeoverflow: scroll indiv.wrapper, dann hat das rote Banner die richtige Größe (Geige). Es befindet sich jedoch nicht mehr an einer festen Position (wenn Sie nach unten scrollen, wird das Banner nach oben gescrollt).

Wie kann ich die folgenden zwei Dinge zusammen erreichen?

Das rote Banner befindet sich an der festgelegten Position wie indiese Geige.Das rote Banner hat die volle Breite mit Ausnahme der Bildlaufleiste wie indiese Geige.

Ich möchte, dass dies in Google Chrome funktioniert.

HTML:

<div class="wrapper">
    <div class="red-banner"></div>
    <div class="main">
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
        <div class="item">foo</div>
    </div>
</div>​

CSS:

div.wrapper {
    position: relative;
}

div.main {
    height: 200px;
    overflow-y: scroll;
}

div.item {
    border: 1px solid black;
    margin: 20px;
    padding: 20px;
}

div.red-banner {
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 20px;
}