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

时间:2016-08-07 11:32:48

标签: html css html5 twitter-bootstrap css3

我正在尝试创建一个投资组合,当用户滚动时,可以看到并修复一个小条形图标。点击后,它应该在导航栏中显示工具,如“关于我,与我联系”。

我尝试使用position:fixed;但它没有用。

我似乎无法将此栏图标显示在页面左侧。尝试给它不同的边距和填充,下拉也不起作用。

.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>

1 个答案:

答案 0 :(得分:1)

.dropdown不一定是孩子的另一个元素,除了身体

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>
myClass.method1();