CSS - Исправлена ​​ширина фона для пребывания внутри контейнера

Question

Возможно ли это?

В принципе у меня есть следующие: -

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; 
} 

Вот JSFIDDLE.

Я в основном всегда хочу .book-now-merge, чтобы всегда выравнивать право от #wrapper div, но как фиксированное положение, чтобы оно оставалось с вами, когда вы прокручиваете страницу вниз, любые идеи, как я могу это достичь?

Answer 1

Так как #wrapper и .book-now-merge имеют фиксированную ширину, вы можете взять ширину #wrapper (600px), вычесть из того, что ширина .book-now-merge (278px) и использовать полученную 322px в качестве параметра left неподвижного элемента, расположенного .book-now-merge:

https://jsfiddle.net/f7wy5vh4/

Answer 2

вы можете попробовать это:

#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

Попробуйте добавить float:right к вашему <a> элемент и удалить right: 0 из .book-сейчас-слияния.

EDIT: Если вам нужно .book-теперь сливаются внутри обертки, просто добавьте margin-left: -278px

JSFiddle