CSS ポジション設定

■問題点:CSSでポジションの設定がうまくいかない

↓うまくいかなかった設定

親ボックスに position:relative; 画像にposition:absolute;を設定。一つ目の画像のみ位置設定が効くが2.3個目が効かない。

CSS

#menubord{

width:700px;

height:700px;

float:right;

padding:0px;

position:relative;

background-color:red;

}

.menu_a{

position:absolute;

left:20px;

top:10px;

.menu_b{

position:absolute;

left:50px;

top:10px;

}

.menu_c{

position:absolute;

left:1200px;

top:10px;

}

 

HTML

<div id=”menubord”>
<p class=”menu_a”><img src=”../img/menubord01.png”></p>
<p class=”menu_b”><img src=”../img/menubord02.png”></p>
<p class=”menu_c”><img src=”../img/menubord03.png”></p>
</div>

 

 

 

 

 

→→→→→→→→

ボックスを横に3つ並べて、それぞれに画像を入れる事で回避。この方法が正しいかどうかはわからない。

コメントは受け付けていません。

Proudly powered by WordPress | テーマ: Baskerville 2 by Anders Noren

ページ先頭へ ↑