如何将 div 直接定位在点击的图像下方？答案

【问题标题】：How do I position a div directly under a clicked on image?如何将 div 直接定位在点击的图像下方？
【发布时间】：2012-09-23 17:55:23
【问题描述】：

我有一个网站，页面上列出了社交图标。当您单击一个时，我希望弹出一个包含更多信息的窗口。这是用户单击图标后我希望它看起来的图片。

整个弹出框都包含在它自己的 div 中。

我正在寻找一种更动态的方法，然后只是在每个按钮的不同坐标中进行硬编码。

提前致谢。

HTML

<div id='inset'>
    <div id='icon-gutter'>
        <div id='gutter-loader'>


        </div>
        <div id='icons'>
        <img src='images/facebook.png' id='facebook' />
        <img src='images/twitter.png' id='twitter' />
        <img src='images/google+.png' id='google+' />
        <img src='images/linkedin.png' id='linkedin' />
        <img src='images/reddit.png' id='reddit' />
        <img src='images/tumblr.png' id='tumblr' />
        <img src='images/pinterest.png' id='pinterest' />
        <img src='images/youtube.png' id='youtube' />
        <img src='images/lastfm.png' id='lastfm' />
        <img src='images/instagram.png' id='instagram' />
        <div id='pop-over-wrap'>
            <div id='arrow'>
            </div>
        <div id='pop-over-body'>
            Hello
        </div>
        </div>
        </div>

    </div>
</div>

CSS

#inset {
margin: 0;
padding: 0;
background: url(grey-fabric.png) repeat; /*#001121;*/
height: auto;
max-width: 100%;
position: relative;
padding: 14px 10px 10px 22px;

border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px;

}
#icon-gutter {

    height: auto;
    min-height: 43px;
    position: relative;
    text-align: center;
}

#icons {
    opacity:0;
}
#icons img {

    height: 95px;
    position: relative;
    margin: 0 8px;
    cursor: pointer;

    transition: all .2s;
-moz-transition: all .2s; /* Firefox 4 */
-webkit-transition: all .2s; /* Safari and Chrome */
-o-transition: all .2s; /* Opera */

}
#pop-over-wrap {
    padding: 10px;
    position: absolute;
    width: 200px;
    height: 230px;
    background-color: white;
     border-radius: 5px 5px 5px 5px; 
    -moz-border-radius: 5px 5px 5px 5px; 
    -webkit-border-radius: 5px 5px 5px 5px;
    margin-top: 20px;
    margin-left: 300px;

    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

}
#arrow {
    position: relative;
    background: url(images/arrowup.png) no-repeat;
    background-position: top center;
    height: 40px;
    margin-top: -30px;

}
#pop-over-body {


}

【问题讨论】：

我认为您可以使用 ul 代替 id 的图标和类。
你是对的。不知道为什么我以前决定不这样做。谢谢

标签： javascript jquery html css

【解决方案1】：

去除#pop-over-wrap css规则上的边距，通过jQuery处理定位。

$(function(){

    var popup = $('#pop-over-wrap'),
        popupOffset = popup.outerWidth()/2,
        arrowExceed = 30; // how many pixel the arrow exceeds from the containing wrapper.

    $('#icons > img').click(function(){
        var icon = $(this),
            iconPos = icon.position(),
            iconW = this.width,
            iconH = this.height,
            popupTop = iconPos.top + iconH + arrowExceed,
            popupLeft = iconPos.left + iconW/2 - popupOffset;

        popup.css({left:popupLeft, top:popupTop});
        popup.show();
    });

});

Demo at http://jsfiddle.net/ALFfs/1/
demo 有硬编码图像宽度，因为我无权访问图像..

【讨论】：

这非常有效。谢谢！我更喜欢这种方法而不是其他方法，因为它给了我最大的控制权。

【解决方案2】：

检查this jquery 插件来完成你想要的

【讨论】：

【解决方案3】：

看看这里：CSS Tooltips and Speech Bubbles。

您不必完全计算这些框的坐标。有很多 CSS3 技巧可以做到这一点。嘿，你甚至不必使用 Javascript！但是，如果您考虑兼容性，请考虑使用此 jQuery plugin 来帮助您制作工具提示。

【讨论】：

【解决方案4】：

如果你把每个img 和它的弹出框放在一个div 中会怎样。然后你将容器 div 定位为相对并将 pop 定位在绝对？

像这样：

<div class="icon">
    <img src='images/facebook.png' id='facebook' />
    <div class="popover">
        <div id='arrow'>
        </div>
        <div id='pop-over-body'>
            Hello
        </div>
    </div>
</div>

然后在css中：

.icon{
    position:relative;
}
.popover{
    position:absolute;
    left:-30px;
    top:10px;
}

你明白了吗？将图标放在无序列表中会更好。

【讨论】：

【解决方案5】：

您可以将 div 用作图像的容器，也可以将 div 用作包含信息的容器。例如：

<div id="container-1">
   <img src='images/facebook.png' id='facebook' />
   <div id="information-1" class="information-block hideElement"></div>
</div>
<div id="container-2">
   <img src='images/twitter.png' id='twitter' />
   <div id="information-2" class="information-block hideElement"></div>
</div>

在哪里

.hideElement { display: none; }
.information-block { position: relative; top: 10px; left: -20px; width: 100px;} //for example

使用 jQuery，您可以在单击第一个容器时显示第一个容器的信息块：

$("#container-1").click(function() {
   $("#information-1").removeClass("hideElement");
});

【讨论】：

【解决方案6】：

您可以像这样在每个 img 上创建事件：

$('#icons').find('IMG').each(function(){
    $(this).click(function(){  
       var idBlock = $(this).attr('id');
        //Code of showing popup window idBlock type
          var htmlBasedonIdBlock = GetBlockHtml(idBlock)
         $('#pop-over-wrap').html(htmlBasedonIdBlock)
   })
})

GetBlockHtml 函数，根据块的类型获取 html

你用的是tipsy，所以你只需要为body的内容制作html，所有的工作都会一个人完成

如果你不为此使用tipsy，这里有很多其他jquery插件http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

【讨论】：