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对齐，但作为一个固定的位置，以便在向下滚动页面时它与您保持一致，任何想法如何实现这一点？< / p>

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>元素，然后从.book-now-merge中删除right: 0。

编辑：如果您需要在包装内部使用.book-now-merge，只需添加margin-left: -278px

JSFiddle

CSS - 修复了留在容器内的背景宽度

3 个答案: