1

我想将我的 div 放在一切之上，但就在我的菜单栏下方。与您在 stackoveflow 上单击用户名时显示的 div 非常相似。尽管我可能做错了，但使用绝对定位的运气并不好。

这是代码示例：http: //jsfiddle.net/DR8H9/2/

我的问题是，如果宽度设置为精确大小，则 div 仅直接显示在链接下方。如果有人要更改浏览器窗口的大小，那将不再正确。

.diva
{
  width: 100%;
  height: 35px;
  background: #ccc;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.thisguy
{
  color: #fff;
  background: #000;
  display: block;
  width: 75px;

  position: absolute;
  top: 26px;
  left: 410px;

}
4

4 回答 4

1

我在JSFiddle上写了一些代码，看看：link

基本上我正在做的是在CSS中：

.panel{
    position:relative;
    height: 30px;
    width: 100%;
    background-color:grey;
  }

  .box{
     position:relative;
     height: 300px;
     width: 300px;
     left: 235px;
     background-color:red;
  }

在HTML

<div class="panel"></div>
<div class="box"></div>

您必须更具体地说明您希望此框如何显示（相对于其他类或绝对）。但这是一般的想法。

于 2013-01-16T14:52:27.100 回答
0

这个怎么样？

<div id="first"><div></div><div>

和CSS

#first{position:relative; width:100%; height:20px; background-color:green; }
#first div{position:absolute; top:100%; left:50px; height:30px; width:30px; background-color:red;}

您可以在此处查看示例

于 2013-01-16T14:43:07.067 回答
0

然后使用 jQuery 获取您单击的链接的位置，然后设置 div 的位置

那么这样的事情应该可以工作

$(document).ready(function () {

$('.thisguy').hide();

$('.diva a').click(function() {

var pos=$(this).position();
$('.thisguy').css({'top':pos.top+25+"px",'left':pos.left-1+"px"});

$('.thisguy').toggle();

});

$(window).resize(function() {  
     $('.thisguy').hide();
});  

});

如果有人要调整他们的窗口大小，那么我会使用 jQuery 来隐藏 div，或者你将不得不尝试做一些编码来检查调整大小，然后再次重新定位 div。

试试这个http://jsfiddle.net/trekmp/kJaEc/

于 2013-01-16T14:41:35.227 回答
0

这是使用您自己的代码的解决方案：

JSFiddle 解决方案

基本上你所缺少的只是margin-left:auto; margin-right:auto;你的.thisguy班级。它将在页面上居中。现在，如果您添加更多链接...我们可能需要查看...

于 2013-01-16T15:18:50.820 回答