css – 如何在加载时将元素放置在屏幕底部但不固定?

前端之家收集整理的这篇文章主要介绍了css – 如何在加载时将元素放置在屏幕底部但不固定?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在页面底部放置一个V形箭头向下箭头,这将允许用户在点击时平滑滚动到下一部分.无论屏幕的设备或尺寸如何,我都希望这个位置始终接近底部,我不希望它留在原地.它应该与网站的其余部分一起滚动.当用户点击它时,它将滚动到下一部分,并且屏幕底部还会有一个新的V形符号向下箭头,链接到下一部分.

HTML

  1. <div class="row chevron-down">
  2. <div class="col-md-12">
  3. <a href="#aboutus1" class="smoothScroll"><img class="img-responsive visible-xs center-block" src="img/chevron-down.png" alt="Transformative Thinking" /></a>
  4. </div>
  5. </div>

CSS

  1. .chevron-down {
  2. /* magic code here */
  3. }

解决方法

可能有几种方法可以实现,但绝对定位结合了几个CSS3功能是我的第一个想法.使用top:100vh将V形符号发送到屏幕底部,然后翻译YY(-100%)使其位于底部上方(因此它在开始时不在视口下方):
  1. .chevron-down {
  2. position:absolute;
  3. top:100vh;
  4. transform:translateY(-100%);
  5. width:100%;
  6. }

这是一个Bootply来演示.希望这可以帮助!如果您有任何疑问,请告诉我.

猜你在找的CSS相关文章