CSS - Feste Hintergrundbreite, um im Container zu bleiben

Question

Ist das möglich?

Im Prinzip habe ich die folgenden: -

HTML

<div id="wrapper"> 
<a href="https://bookings.planetbouncetrampolinepark.com/JumpBookings/BookSession.aspx?site=1&amp;group=1"> 
    <div class="btn-book book-now-merge" style="color: rgb(0, 0, 0); z-index: 6;"> 
    <span class="txt-plan" style="display: none;">plan your jump</span> 
    <br> 
    <span class="txt-book" style="top: -25px; background: url(&quot;/wp-content/themes/planetbounce/assets/img/txt-book-now.png&quot;);"></span> 
    <span id="glim-block" style="height: 0px;"> 
           <span class="book-now-glimmer" style="left: 310px; display: block;"> 
           </span> 
    </span> 
    </div> 
    <span class="book-now-shadow-default" style="display: none;"></span> 
    <span class="book-now-shadow" style="display: none; opacity: 0;"></span> 
</a> 
</div> 

CSS

#wrapper { 
    width: 600px; 
    height: 1000px; 
    background: #ececec; 
} 

.book-now-merge { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/book-now-merge.png); 
    height: 54px; 
    width: 278px; 
    background-size: 278px 54px; 
    position: fixed; 
    top: 73px; 
    right: 0; 
    z-index: 5; 
} 

Hier die JSFIDDLE ist.

Ich möchte im Grunde immer .book-now-merge immer rechts von der #wrapper div aber als feste Position ausrichten, so bleibt es bei Ihnen, wie Sie auf der Seite nach unten scrollen, irgendwelche Ideen, wie ich das erreichen kann?

Answer 1

Da sowohl die #wrapper und .book-now-merge eine feste Breite haben, können Sie die Breite von #wrapper nehmen (600 Pixel), subtrahieren aus, dass die Breite von .book-now-merge (278px) und Verwendung des resultierenden 322px als left Parameter des festen positioniert .book-now-merge Element:

https://jsfiddle.net/f7wy5vh4/

Answer 2

können Sie dieses versuchen:

#wrapper { 
    width: 600px; 
    height: 1000px; 
    background: #ececec; 
} 

.book-now-merge { 
    background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/book-now-merge.png); 
    height: 54px; 
    width: 278px; 
    background-size: 278px 54px; 
    position: absolute; 
    top: 73px; 
    right: 0; 
    z-index: 5; 
} 

DEMO HERE

Answer 3

Try float:right zu Ihrem <a> Element hinzufügen und entfernen right: 0 von .book-jetzt-merge.

EDIT: Wenn Sie innerhalb von Wrapper .book-jetzt-fusionieren, fügen Sie einfach margin-left: -278px

JSFiddle