0

我有以下代码：

<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，总是相对于浏览器窗口而不是包含元素。但是，我希望.tabsdiv 是固定的，但相对于包含的 div。无论如何要固定位置并使其相对于包含元素？

4

1 回答 1

1

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

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

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

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

于 2013-02-09T20:48:45.577 回答