位置固定与相对位置答案

【问题标题】：Position Fixed with Position Relative位置固定与相对位置
【发布时间】：2013-02-10 04:48:45
【问题描述】：

我有以下代码：

<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。是否有固定位置并且相对于包含元素？

【问题讨论】：

使用位置：绝对。
@reinder - 我可以，但我希望 div 保持固定在页面上而不是滚动。
在这种情况下，您将需要一些 javascript 来计算包含 div 的位置。无论如何，固定总是相对于浏览器窗口（视口）。
@reinder - 随意将其写入答案。 JS 并不总是我的强项 =>
重复 - stackoverflow.com/questions/6794000/…

标签： css position positioning css-position

【解决方案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。

【讨论】：