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 に答える