※ ChatGPTを利用し、要約された質問です（原文：positionの設定の仕方について）
positionの設定の仕方について
このQ&Aのポイント
中央に1つの大きな画像を配置し、その画像の左右の任意の位置にリストを配置する方法について質問です。
職場ではリストの配置まではうまく行きましたが、自宅の環境で見るとリストが動かない現象が起きています。
画像は正しく配置されているので、違いが生じる原因がわかりません。
中央に1つの大きな画像を配置。
そしてその画像の左右の任意の位置に、リストを配置しようと考えています。
しかし、以下のような表記にしましたがリストが思うように配置されません。
職場ではリストの配置まではうまく行きました。
が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。
画像はきちんと配置されています。
どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。
よろしくお願いします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>ポジションタグ練習用ページ </title>
<link href="css/position2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="position">
<ul>
<li id="01"><a href="1.htm">あいうえお</a></li>
<li id="02"><a href="2.html">かきくけこ</a></li>
</ul>
<img src="images/flower.jpg" alt="花" width="260" height="402" id="img">
</div>
</body>
</html>
--------------------
#position {
position: relative;
left: 0px;
top: 0px;
}
#img {
position: relative;
height: 402px;
width: 260px;
left: 85px;
top: 0px;
}
#01 {
position: absolute;
height: 20px;
width: 100px;
left: -11px;
top: 0px;
background: #FFFFCC;
}
#02 {
position: absolute;
height: 20px;
width: 100px;
left: 360px;
top: 26px;
background: #FFCC99;
}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
あっ！こんな初歩的なことでつまづいていたとは…恥ずかしい… きちんと表示されるようになり、助かりました。 ありがとうございました！