如何将HTML元素固定在某个位置？

Question

我正在尝试创建一个投资组合，当用户滚动时，一个小工具栏图标可见并固定。 单击后，它应在导航栏中显示“关于我，请与我联系”之类的工具。

我尝试使用位置：固定； 但它不起作用。

而且我似乎无法在页面的左侧看到该栏图标。 尝试给它提供不同的边距和填充，并且下拉菜单也不起作用。

 .fa { transform: scale(0.5,0.5); } .dropdown{ position: fixed; } 

 <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle pull-left" type="button" id="menu1" data-toggle="dropdown"><i class="fa fa-bars" aria-hidden="true"></i></button> <span class="caret"></span></button> <nav role="navigation"> <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Home</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact</a></li> </ul> </nav> </div> </div> 

Answer 1

.dropdown不能是子元素，但身体除外

body {
  position: relative;
}
.dropdown{
  position: fixed;
}

例：

 body { position: relative; height: 200vh; background: linear-gradient(orange 0, red 50%, pink 100%); } .dropdown{ position: fixed; width: 140px; height: 180px; background-color: blue; } 

 <div class="dropdown"> </div>