Question

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

在下面的简化示例中，我想要定位菜单＆＃39;在div下方，值为＆＃39; X＆＃39;。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

$(document).ready(function(){
    $("#1").click(function(event){
        $("#popup").toggleClass("none");
    }); 
});

.dropdown {
  position: relative;
  display: inline-block;
}

#popup {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 30px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top:30px;
}

.none{
  display: none;
}

.dropdown-content a {
  color: black;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropbtn, .icon {
  font-size: 10px;
  float: left;
  height: 32px;
  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;
}
.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='block'>
  <div class="dropdown">
    <button class="dropbtn" id="1">X</button>
    <div class="dropdown-content none" id="popup">
      <a href="#">blabla</a>
    </div>
  </div>
  <button type="button" class="icon">A</button>
  <button type="button" class="icon">A</button>
</div>
<div class='v-divider'></div>

也许这可行，我使用了代码 W3SCHOOLS DROPDOWN MENU

这是通过悬停来完成的，如果你想查看它，非常有用。对于我的例子，我使用了他们的clases的名字，基本上弹出窗口有一个z-index，这将内容置于其他内容的上方或下方，并使用绝对位置，弹出窗口相对于.dropdown类，最高值从它的父级移动，而不是从页面移动，所以它不会跳转。

接下来的事情是使用jQuery检查按钮上的click事件，其中x为id ='1'，每次单击该按钮时，它将在弹出窗口中切换类none，这是显示属性。

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

2 个答案: