スペースを奪わずに別の要素を相対的に配置する方法

Question

クリックしたときにクリックされた要素の下にポップアップを表示したいと思います。 しかし、この要素は他の要素の間に配置されます。 ポップアップを他の2つの要素の間に配置し、相対位置にすると、まだスペースが必要です。

以下の簡単な例では、divの下の 'menu'を値 '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>

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>

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-インデックスがあり、これによって内容が他のコンテンツの上または下に配置され、絶対位置を使用して、ポップアップは.dropdownクラス一番上の値はページからではなく親から移動するため、ジャンプしません。

次に、jQueryを使用して、ボタンがクリックされたときにid = '1'を持つxのボタンのクリックイベントを確認していましたが、ポップアップでクラスnoneをトグルします。表示プロパティを変更します。