CSSの書き方について

質問

Jquery のポップアッププラグインであるPopboxを使おうとしています。

http://gristmill.github.io/jquery-popbox/

実装は出来たのですが、下記の改造で戸惑っています。

●デフォルトでは、クリックしたボタンから吹き出しの形で、ボタンより下にポップアップが表示されます。

●当方の希望
クリックしたボタンの場所にかかわらず、スマートフォンの表示枠の一番上から表示させたいです。

CSSのどこを弄ると当方の希望の状況になるでしょうか?

よろしくお願いいたします。

<style>
.popbox {
margin:0px auto;
text-align:center;
position:relative;
}

.collapse { position:static; }

.open {
background:#DDD;
border:solid 1px #FFF;
border-radius:5px;
box-shadow: 0px 0px 5px #CCC;
background:-webkit-gradient(linear,left top,left bottom,from(#f4f4f4),to(#e8e8e8));
background:-moz-linear-gradient(top,#f4f4f4,#e8e8e8);
background:linear-gradient(top,#f4f4f4,#e8e8e8);
padding:8px;
}

.box {
width:280px;
display:block;
display:none;
background:#FFF;
border:solid 1px #BBBBBB;
border-radius:5px;
box-shadow:0px 0px 15px #999;
position:absolute;
}

.box a.close {
color:red;
font-size:12px;
font-family:arial;
text-decoration:underline;
}

.arrow {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #FFF;
position:absolute;
left:1px;
top:-10px;
z-index:1001;
}

.arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #BBBBBB;
position:absolute;
top:-12px;
z-index:1000;
}
</style>

<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>

<h1>PopBox</h1>

<div class='popbox'>
<a class='open' href='#'>
<img src='images/plus.png' style='width:14px;position:relative;'> Click Here!
</a>

<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>

表示内容

</div>
</div>
</div>

回答No.1

ORUKA1951 · ベストアンサー

absoluteを使います。absolute(絶対配置)の場合、直近のstticでない親コンテナブロックの位置が基準になります。
　⇒'display'、'position'、'float'の関係( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#dis-pos-flo )
　⇒'display'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#containing-block )

お礼

わかりました。
ここでは記入しなかったjavascriptで制御されていたようです。
javascriptの制御を外したらキチンと表示されました。
ありがとうございました。

補足

ありがとうございます。

position:absolute; margin-top:0px;top:0px;
を .open {　の下、　または　.box {　の下に配置しましたが、上からの距離に変化ありません。相変わらずボタンの直下に吹き出しとして表示されます。

.popbox {　直下に置いたところ、ボタンが一番上に張りつきました。

もう少しのヒントをお願いします。