2009年08月28日

overflowの中のposition

こんにちは、馬場です。


webページ内で、
縦に長いコンテンツがあった場合、
その部分をスクロールさせることが
あると思います。

例えば、
会員登録の利用規約や
サイドメニューの新着部分等で
使うことがあると思いますが、
スクロールさせる場合は
overflowを使うことで実現できます。


今回は
スクロール(overflow)の中で、
positionを使った際の注意点について
お話させていただきます。
(IE限定の注意点です。)




▼スクロールしない・・・(IE限定)


スクロールについては、
overflow:autoし、
heightを設定することで、
heightの値を超えた内容が
スクロールで確認できるようになります。

(widthを設定し、表示内容がその値を超えれば
横へのスクロールとなります。)


例えば、スクロールの中で、
テキストの後ろにアイコン表示をするために
positionで位置調整をしようとすると
IEでは、そのアイコンがスクロールしなくなってしまいます。

(「テキストの横に並ぶ画像の位置合わせ」についてはコチラ


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
スクロールしても、アイコンの位置が変わっていません。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper01">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper01 {

overflow:auto;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper01 img {

position:relative;
top:2px;

}


position:relative
(通常の位置を基準とした相対的な配置)
なので、
スクロールしないのが正しいと
思えなくもないですが、
どうなのでしょうか?


私、個人的には
ややこしいので、
スクロールしていただきたいところです。

WindowsのIE6.0と7.0で
スクロールしないことを
確認しました。
(IE8.0では解決しているようです。)



▼無事にスクロール


IEだけスクロールしないのでは、
ひどく気持ちが悪いので
いろいろと試していると
解決策が見つかりました。

overflowを設定している要素へ
positoin:relativeを設定することで
無事にスクロールしていきました。


▼スクリーンショット
   
左がスクロール前、右がスクロール後です。
アイコンの位置が変わっているのが確認できます。
※スクリーンショットは、Windows Internet Explorer 6.0のものです。

(htmlコーディング)
<div class="wrapper02">
<p>スクロール01</p>
<p>スクロール02 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール03</p>
<p>スクロール04</p>
<p>スクロール05 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール06</p>
<p>スクロール07</p>
<p>スクロール08</p>
<p>スクロール09</p>
<p>スクロール10 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール11</p>
<p>スクロール12</p>
<p>スクロール13</p>
<p>スクロール14</p>
<p>スクロール15</p>
<p>スクロール16</p>
<p>スクロール17 <img src="images/icon_check.gif" alt="check!" /></p>
<p>スクロール18</p>
<p>スクロール19</p>
<p>スクロール20</p>
<p>スクロール21</p>
<p>スクロール22</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
.wrapper02 {

overflow:auto;
position:relative;
width:180px;
height:200px;
margin:30px;
font-size:16px;

}
.wrapper02 img {

position:relative;
top:2px;

}


「なんだか、できそうな感じがする」
と思い、設定してみたのですが、
本当にできてしまいました。

IEの気持ちが少しわかった気がします。。。


HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 20:19 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。