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にいくつかのコードを書きました、それをチェックしてください：リンク

基本的に私がやっていることは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

独自のコードを使用したソリューションは次のとおりです。

JSFiddleソリューション

基本的にあなたが欠けていたのmargin-left:auto; margin-right:auto;はあなたの.thisguyクラスのためだけでした。これはページの中央に配置されます。リンクを追加すると...おそらくそれを確認する必要があります...

于 2013-01-16T15:18:50.820 に答える
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

これはどう？

<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 に答える