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);
});

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

位置固定与位置相对

1 个答案: