画像内の文字位置の指定　HTML　CSS

画像の上に文字を指定を配置したい時編

html記述

<body>
<title>要素の位置を定義</title>
<div id="sample1"><img src="liona1024.jpg"alt=""></div>　←"liona～"は画像の名前です
<div id="sample2">Donuts makes us happy!</div>　　　　←これらはsampleで記述
<div id="sample3">そうだ、ミスドに行こう！</div>　　　　してますがなんでもOK！

CSS記述

@charset"UTF-8"; ←今回もUnicodeです

body{
margin:Opx;
background-color:#ffffcc;

}
#sample1.{
width:150px;
height:100px;
position:relative;
top:50px;
left:30px;

}
#sample2{
position:absolute;
top:60px;　　　　　　　　　　　　←文字の位置は試行錯誤💦
left:70px;　
color:red;　　　　　　　　　　　　←ちなみに；を抜かすとこれまた反映されず…
font-size:600%;

font:bolder 18px"Comic Sans MS",Arial,sans-serif;
}
#sample3{
position:absolute;
top:300px;
left:400px;
color:black;
font-size:350%;
font-style:italic;
}

出力結果　　(※使用画像はミスタードーナツのフリー壁紙です)

f:id:Detsch:20160828011306j:plain