HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10

締切済

質問者：riribestwanko
質問日時：2023/02/28 23:17
回答数：4件

HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10px下の所に置きたいのですが、その上に設置した画像よりも10px下の所に来てしまい、どうしても画像より上に上がりません。どうすれば画像より上に文字が来てくれますか？ちなみに「ochawan」はmargin-topで位置指定しています。

<div class="ochawan image">
<img src="./images/ochawan" alt>
</div>
<h1 class="campaign-subtitle">
ochawan
</h1>
という形で書いています。

補足日時：2023/03/01 20:39
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： gura_
回答日時：2023/03/02 10:23

riribestwanko さん

　････この絵で「ochawan」の文字を枠全体の上から10px下の所に置きたい･･･････

こういう事ですか。↓

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<style>
.box {
position: relative;
width: 600px;
height: 600px;
margin: 0 auto;
border: solid 1px;
}

.campaign-subtitle {
position: relative;
text-align: right;
margin-top: 10px;
margin-right: 20px;
}

.image {
padding: 0 32px;
}
</style>
</head>

<body>
<div class="box">
<h1 class="campaign-subtitle">
ochawan
</h1>
<div class="ochawan image">
<img src="https://oshiete.xgoo.jp/images/feeling/qjiro/pc/ … alt>
</div>
</div>
</body>

</html>

- 0
- 件

通報する

No.3

回答者： Zimmerman
回答日時：2023/03/01 23:28

〜補足をうけて〜

理想的には全体を囲うボックスを作って
それにposition : relative;
を付けておいた方が、何を基準にtop:10px;なのかが明示されるから
いいと思いますが、この状態だけならば、
大外のボックスは無くても大丈夫です。

単純にcssにこのように書けばいい。

.campaign-subtitle {
position:absolute;
top:0;
right:20px; /* ←右から何ピクセルとか指定したい場合 */
}

ただし上の画像の位置は知りませんよ。
何も指定しない限り添付のメモの位置じゃなく、
左上角に来ると思いますが。