如何在不占用空间的情况下将元素相对于另一元素进行定位 [英] How do I position an element relative to another without taking up space

问题描述

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

在下面的简化示例中，我想定位'div'下面的'menu'，值为'X'。

。图标{font-size：10px;向左飘浮; height：30px;宽度：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;顶部：40px; margin-bottom：100px;宽度：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 =buttonclass =icon> A< / button> < button class =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>< div class ='block' > < button type =buttonclass =icon> A< / button> < button type =buttonclass =icon> A< / button> < button class =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>< > < div id ='menu'> <跨度>布拉布拉< /跨度> < / div>< / div>< div class ='block'> < button type =buttonclass =icon> X< / button> < button type =buttonclass =icon> A< / button> < button type =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>

解决方案

请检查代码段，你想要相同。

$（.icon）.click（function（）{var偏移= $（this）.position（）; console.log（left：+ offset.left +，top：+ offset.top）; $（。menu）。css（{left： / code>

.icon { font-size：10px;向左飘浮; height：30px;宽度：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;顶部：40px; margin-bottom：100px;宽度：100px; border：1px solid＃a1a1a1;填充：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 =buttonclass =icon> A< / button> < button class =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>< div class ='block' > < button type =buttonclass =icon> A< / button> < button type =buttonclass =icon> A< / button> < button class =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>< > < div id ='menu'> <跨度>布拉布拉< /跨度> < / div>< / div>< div class ='block'> < button type =buttonclass =icon> X< / button> < button type =buttonclass =icon> A< / button> < button type =buttonclass =icon> A< / button>< / div>< div class ='v-divider'>< / div>

I'd like to show a popup, when clicked, underneath the clicked element. This element however is positioned between other elements. When I place the popup between 2 other elements and make it position relative, it still takes up space.

In below simplified example I'd like to position the 'menu' underneath the div with the value 'X'.

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

解决方案

Please check the snippet, do you want the same.

$( ".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>

这篇关于如何在不占用空间的情况下将元素相对于另一元素进行定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！