html - 如何在不占用空间的情况下相对于另一个元素定位元素

Question

我想在点击元素下方显示一个弹出窗口。然而，该元素位于其他元素之间。当我将弹出窗口放在其他 2 个元素之间并使其相对定位时，它仍然占用空间。

在下面的简化示例中，我想将“菜单”放置在值为“X”的 div 下方。

.icon {
  font-size: 10px;
  float: left;
  height: 30px;
  width: 30px;
  background-color: #EAEAEA;
  padding-top: 2px;
  margin-right: 3px;
  border: 0px;
  border-radius: 3px;
}

.v-divider {
  float: left;
  height: 35px;
  border: 0;
  border-right: 1px solid #d9d6d0;
  margin: 0px 5px 0px 5px;
}

.menu {
  position: relative;
  top: 40px;
  margin-bottom: 100px;
  width: 100px;
  border: 1px solid #a1a1a1;
  padding: 5px;
}

.block {
  float: left;
  margin: 7px 0px 5px 0px;
}

<div class='v-divider'></div>
<div class='block'>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>
<div class='block'>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>

<div class='menu'>
  <div id='menu'>
    <span>blabla</span>
  </div>
</div>

<div class='block'>
  <button type="button" class="icon">X</button>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>

Answer 1

请检查代码段，您是否想要相同的代码段。

$( ".icon" ).click(function() {
var offset = $(this).position();
console.log( "left: " + offset.left + ", top: " + offset.top );
$(".menu").css({"left":offset.left});
});

.icon {
  font-size: 10px;
  float: left;
  height: 30px;
  width: 30px;
  background-color: #EAEAEA;
  padding-top: 2px;
  margin-right: 3px;
  border: 0px;
  border-radius: 3px;
}

.v-divider {
  float: left;
  height: 35px;
  border: 0;
  border-right: 1px solid #d9d6d0;
  margin: 0px 5px 0px 5px;
}

.menu {
  position: fixed;
  top: 40px;
  margin-bottom: 100px;
  width: 100px;
  border: 1px solid #a1a1a1;
  padding: 5px;
  margin-top:10px;
}

.block {
  float: left;
  margin: 7px 0px 5px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='v-divider'></div>
<div class='block'>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>
<div class='block'>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>

<div class='menu'>
  <div id='menu'>
    <span>blabla</span>
  </div>
</div>

<div class='block'>
  <button type="button" class="icon">X</button>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>