0

私は次のCSSでaadivを持っています

.menu{ 
    width:auto; 
    background-color:#FFF; 
    z-index:14; 
    position:absolute; 
    border:1px solid #d7d7d7; 
    border-bottom:2px solid #ccc;   
    display:none; 
    height:auto; 
    padding-top:2px; 
    padding-bottom:2px;  
}

必要な要素をクリックすると、クリックした要素の左右のオフセットに従ってこのdivを配置します。

ドキュメントの高さが上から上がると、このdivはそれに応じて位置を変更しません。これはそれを非常に悪く見せます。

そのような場合、どうすればその位置を維持できますか

4

4 に答える 4

1

で包ん.menuでみてくださいdiv wrapper

html

<div class="mainWrap">
  <div class="menu"></div>
</div>

css

.mainWrap {
 position:relative;
}

.menu{ 
    width:auto; 
    background-color:#FFF; 
    z-index:14; 
    position:absolute; 
    border:1px solid #d7d7d7; 
    border-bottom:2px solid #ccc;   
    display:none; 
    height:auto; 
    padding-top:2px; 
    padding-bottom:2px;  
}
于 2013-03-11T08:55:20.847 に答える
1

を使用して要素を配置するabsoluteと、配置された最初の祖先に基づいてオフセットが計算されます（これはposition: absolute;またはを意味しposition: relativeます）。

<body>
  <div id="parent1">
    <div id="child1" style="position: absolute"></div>
  </div>
  <div id="parent2" style="position: relative;">
    <div id="child2" style="position: absolute;"></div>
  </div>
  <div id="parent3" style="position: absolute;">
    <div id="child3" style="position: absolute;"></div>
  </div>
</body>

child1body親にポジショニングがないため、オフセットを計算します。child2とはポジショニングがあるため、child3親からのオフセットを計算します。parent2parent3

詳細については、絶対測位、相対測位、およびフロートに関するW3C仕様を確認してください。

于 2013-03-11T08:40:15.217 に答える
0

フィドルが必要です。ただし、このような場合は、position：absoluteではなくposition：relativeを使用してください。

于 2013-03-11T08:17:42.853 に答える
0

あなたは位置を持っていますか：相対的; 親要素に？

于 2013-03-11T08:28:22.897 に答える