Question

我有一个跟随css的div

.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不会相应地改变其位置。这使它看起来很糟糕。

在这种情况下，我如何保持其地位

Answer 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>

child1计算body的偏移，因为它的父级没有定位。 child2和child3计算他们与父母的偏差，因为parent2和parent3有定位。

有关更多信息，请查看W3C specs关于绝对定位，相对定位和浮动的信息。

Answer 2

尝试使用.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;  
}

Answer 3

需要小提琴。但我会说在这种情况下使用position：relative而不是position：absolute。

Answer 4

你有位置：亲戚;在父元素上？

如何让position-absolute div保持其在文档大小上的位置

4 个答案: