<h2>Entry</h2>
h2 {
font-size: 18px;
padding: 4px 10px;
margin-bottom: 10px;
background-color: #cc0000;
background: -webkit-gradient(linear, left top, right top, from(#ff6600), to(#990000));
text-shadow: 0 0 6px #ffffff,0 0 6px #ffffff,0 0 6px #ffffff;
}
<dl> <dt>何人まで一緒に申し込めますか？</dt> <dd>何人でもOKです。</dd> </dl>
dt {
margin-bottom: 10px;
font-weight: bold;
line-height: 1.5em;
}
dt::before {
content: "Q.";
color: #ff0000;
margin-right:10px;
}
dd {
margin-bottom: 1em;
line-height: 1.5em;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
dd::before {
content: "A.";
color: #ff0000;
margin-right:10px;
font-weight: bold;
}
<p id="pagetop"><a href="#top">Page Top</a></p>
#pagetop {
border-radius: 5px;
background-color: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
text-align: center;
margin-bottom: 20px;
}
#pagetop a {
text-shadow: 1px 1px 0 #ffffff;
display: block;
padding: 10px 0;
color: #444444;
text-decoration: none;
}
スクリーンの固定位置にウインドウを重ねます
しかし、スクリーンのサイズが変わってしまうとウインドウが隠れてしまいます
<div class="shadow" style="color : rgb(97, 97, 97); background-color : rgb(216, 216, 216); vertical-align : middle; text-align : center; border-width : 2px; border-style : solid; border-color : black; width : 300px; height : 150px; position : fixed; top : 350px; left : 4%; z-index : 10;"> <p style="font-size : 20px; text-align:center; line-height:1.4em;"> <strong>!! 急募 !!<br />大型車(チップ運搬車)運転手</strong><br> <br>お気軽にお問い合わせください</p> </div>
スクリーンのサイズが変わってもstyle="color : rgb(97, 97, 97); background-color : rgb(216, 216, 216); vertical-align : middle; text-align : center; border-width : 2px; border-style : solid; border-color : black; width : 300px; height : 150px; position : fixed; top :45%; left : 4%; z-index : 10;">
<div style="position: relative;">
<img src="dog.jpg" width="320" height="140" alt="犬看板"><br>
<div style="position: absolute; top: 15px; left: 150px; width: 150px;">
看板の内側に表示する文章です。
</div>
</div>
内側のdiv要素 position属性にabsoluteを指定しているので、自分から最も近いposition属性を持った ボックス要素からの絶対位置(上から15ピクセル・左から150ピクセルの位置)に表示されます。 その「最も近いボックス要素」とは、ここでは「position: relative;」を指定している 「外側のdiv要素」です。 width: 150px; ここでは、文字の表示領域の横幅を150ピクセルに限定しています。 これは、看板画像の横幅（枠幅）に合わせるためです。この指定がなければ、 文字は、画像を飛び出て右へ右へとウインドウの端まで続いてしまいます。 外側のdiv要素 内側のdiv要素の基準ボックスにするために、position属性を指定しています。値は relative ですが、移動距離は指定していないので、本来表示されるべき位置のまま表示されます。 基準ボックスにするためにposition要素が必須なので、この記述を省略はできません。 Position要素を省略すると、内側のdiv要素はウインドウ端（＝html要素）を基準にした 位置に表示されます。
<div style="position: relative;">
<img src="sea.jpg" width="320" height="200" alt="海">
<div style="position: absolute; top: 30px; left: 150px;">
<form>
<select>
<option>All About Japan</option>
<option>パソコン・家電チャネル</option>
<option>ホームページ作成</option>
</select>
</form>
</div>
</div>
<div style="position: relative;">
<img src="haneda.jpg" width="320" height="200" alt="羽田上空写真">
<span style="position:absolute; top:183px; left:80px; border:1px blue solid; background-color: #ffffcc;">
羽田上空 HANEDA
</span>
</div>
static 標準の表示方法です。（指定しないのと同じ） relative 本来表示される位置から、相対的に指定値だけ移動した位置に表示 Absolute position属性で値にstatic以外が指定されているボックスの内、 最も近い位置にあるボックスの端から、指定値だけ離れた位置に表示 Fixed ブラウザの端を基準にして、指定ピクセル離れた位置に表示します。 ブラウザ画面をスクロールしても表示位置は変化しません