css - Position Fixed with Position Relative 位置固定

Question

我有以下代码:

<div class="main">
   <!-- CONTENT --> 
 <div class="tabs">
   <!-- CONTENT --> 
 </div>  <!-- Closing div for .tabs -->
 </div>  <!-- Closing div for .main -->

.tabs{
  position: fixed;
  top:110px;
  left:0px;
  width:40px;
  z-index:999
}
.main{
  overflow: hidden;
  margin: 0 0 100px;
  box-shadow: 0 10px 16px rgba(0,0,0,0.33);
  border-radius: 0px 0px 25px 25px;
  position:relative;
}

根据我的理解，position:fixed 始终相对于浏览器窗口而不是包含元素。但是，我希望 .tabs div 是固定的，但相对于包含的 div。有没有固定位置 和 相对于包含元素的位置？

Answer 1

正如所指出的，这是重复的。然而，所提到的问题假设包含元素的宽度是已知的。如果不是这种情况，您将需要一些 javascript。我在这里做了一个例子:http://jsfiddle.net/6TyL4/

请注意，由于 fixed 基本上将元素从容器中取出，因此容器元素不会调整高度宽度等，因此实际上并不“包含”该元素。

$(function(){
    var t = $('.main').position().top;
    var l = $('.main').position().left;
    $('.tabs').css('top', t + 100).css('left', l + 100);
});

这将使 .tabs 相对于“.main”从顶部和左侧偏移 100px。