HTML での位置の使用に関する簡単な紹介

昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。作ったのですが、ショッピングカートのチェックアウト時に、そこに表示される数字を追加する方法がわかりませんでした。ショッピングカートと一緒に数字を移動したい場合は、一緒に配置する必要があります。配置には必ず位置が必要です。まず、数字のある div の位置を absolute に設定して、レイヤー感を出しています。数字の位置の親タグが body なので、top と left もショッピングカートと一緒に希望の位置に設定できます。ただし、ショッピングカートの margin を変更すると、2 つが一緒に移動できなくなるため、ショッピングカートの位置を relative に設定して、数字の位置の親タグがショッピングカートになるようにしました。ショッピングカートの margin をどのように調整しても、数字は一緒に移動してしまいます...

コードをコピー

コードは次のとおりです。

<html>
<ヘッド>
<title>day03.html</title>
<スタイルタイプ="text/css">
/*まず位置divを記述します*/
＃車{
幅:150ピクセル;高さ:30ピクセル;
背景: #999999;
色:白;テキスト配置:中央;
行の高さ: 30px;余白: 232px 300px;
border:1px 黒一色;position: relative;
}
#番号{
幅:20px;高さ:20px;背景:赤;
色:白;テキスト配置:中央;
行の高さ:20px;位置:絶対;
上:-15px;左:25px;
}
</スタイル>
</head>
<本文>
<div id="車">
ショッピングカートに移動してお支払いください
<div id="num">0</div>
</div>
</本文>
</html>

<<: JavaScript のマクロタスクとマイクロタスクの詳細

>>: さまざまなブラウザに対応するためにCSSで指定フォント@font-faceを導入する際の問題