如何修复容器内的按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (32)

我在标题菜单中有一个按钮,该标题包含标志和社交媒体图标和那个按钮。

我想让这个按钮固定,所以当我滚动它总是在屏幕的顶部。

我有以下的HTML代码:

<div class="main_container">
    <div class="wrapper">
      <div class="menu">
        <div class="logo">Logo</div>
        <div class="social-media">
          <div class="facebook">Facebook</div>
          <div class="youtube">Youtube</div>
          <div class="twitter">Twitter</div>
        </div> <!-- social-media -->
        <div class="sticky-container">
          <a class="sticky-element">Button</a>
        </div> <!-- sticky-container -->
      </div> <!-- menu -->
    </div> <!-- wrapper -->
  </div> <!-- main_container -->

和一些CSS代码对齐元素,并在它们之间有所不同:

.menu{background:#ddd}

.logo,
.social-media,
.sticky-container{
  display:inline-block;
  width:30%
}

.logo{background:#000}

.social-media{background:#080}

.sticky-container{background:#333}

.logo,
.sticky-container{color:#fff}

想要带有sticky-element内部类的按钮sticky-container是粘性的。

提问于
用户回答回答于

扫码关注云+社区

领取腾讯云代金券