テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.31

スタイルシート（28）つづき

(8)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>基本>>ボックス>>z-index: ***;（ボックスの重なりの順序を指定）

【ボックスの重なりの順序指定】
複数のボックスを「position: ***;」で位置の指定をして任意の場所にボックスを表示する場合重なり合う順番を任意に指定することができます。

■z-index: ***;
positionで指定したボックスの重なりを指定するプロパティです。
※したがって値 static では使用できません。

【z-index: ***;に使用できる値】

□auto･･･デフォルト
□inherit 親要素での指定を継承

▲直接指定の記述方法
順番を良く見てくださいね！

<div style="width:500px; height:250px; background-color:black; border:#000000; position:relative">
<div style="width:100px; height:100px; background-color:red; position:absolute; top:10px; left:10px; z-index: 1; ">商品画像</div>
<div style="width:100px; height:100px; background-color:blue; position:absolute; top:30px; left:90px; z-index: 2; ">商品画像</div>
<div style="width:100px; height:100px; background-color:green; position:absolute; top:50px; left:180px; z-index: 3; ">商品画像</div>
z-index: 4; ">商品画像</div>
<div style="width:100px; height:100px; background-color:orange; position:absolute; top:90px; left:360px; z-index: 5; ">商品画像</div>
</div>
<div style="width:500px; height:250px; background-color:black; border:#000000; position:relative">
z-index: 5; ">商品画像</div>
<div style="width:100px; height:100px; background-color:blue; position:absolute; top:30px; left:90px; z-index: 3; ">商品画像</div>
<div style="width:100px; height:100px; background-color:green; position:absolute; top:50px; left:180px; z-index: 1; ">商品画像</div>
<div style="width:100px; height:100px; background-color:yellow; position:absolute; top:70px; left:270px; z-index: 2; ">商品画像</div>
<div style="width:100px; height:100px; background-color:orange; position:absolute; top:90px; left:360px; z-index: 4; ">商品画像</div>
</div>
↓こんな感じですね（＾＾）

*****************************************************

【庶事所感】
楽天トラベル見ながら･･･
あぁ温泉に行きたいなぁ･･･と眺めておりました。
関東近県にもけっこうたくさんの良さそうな温泉が･･･
ゆっくり「湯」につかりたいなぁ（＾＾）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ