HTMLのpositionが上手く反映されない

画像が結果です。

以下のHTMLで
非常に良いの部分はpositionのrelativeとabsoluteを使い場所を決めています。
これと同じ設定を＄30/1泊(1人)にもしたいのですが、なぜか上に設定されてしまいます。
.hotelinfo .priceにrelativeが付いています。その範囲を調べる為にbackgroundをつけましたが反映されていません。
なぜ＄30/1泊(1人)が上にきてしまうのでしょうか。bottom:0px;にしているのですから、下に来るべきだと思うのですが。

HTML
1<body>
2  <header>
3  </header>
4
5  <main>
6    <div class="container">
7
8      <div class="lookup">
9        fggggg
10      </div>
11
12      <div class="hotels">
13        <div class="mainrequirements">
14          <span class="">料金の低い順</span><span class="">高評価</span><span class="">おすすめ</span>
15        </div>
16
17        <div class="hotel">
18          <div class="hotelpicks">
19            <div class="mainpick">
20              <img src="imgs/download.jpg" width="300" height="300" alt="">
21            </div>
22            <div class="others">
23              <img src="imgs/img_0.jpg" width="85" height="85" alt="">
24              <img src="imgs/14407458-L-imagenavi.jpg" width="100" height="100" alt="">
25              <img src="imgs/14407458-L-imagenavi.jpg" width="100" height="100" alt="">
26            </div>
27          </div>
28
29          <div class="hotelinfo">
30            <h2 class="hotelname">SARROSA INTERNATIONAL HOTEL</h2>
31            <div class="tags">
32              <span>無料WI-FI</span>
33              <span>駐車場</span>
34              <span>朝食付き</span>
35              <span>キャンセル無料</span>
36              <span>後日支払い可</span>
37            </div>
38            <div class="rating">
39              <span class="rateposition"><span>非常に良い</span><span class="rate">8.5</span></span>
40            </div>
41            <div class="price">
42              <span class="">＄30/1泊(1人)</span>
43            </div>
44          </div>
45        </div>
46        <div class="clear"></div>
47      </div>
48    </div>
49
50
51  </main>
52</body>

CSS
1.hotelinfo .rating {
2  width: 350px;
3  font-size: 22px;
4  font-weight: bold;
5  margin-bottom: 50px;
6  position: relative;
7}
8/*上手くいっている部分*/
9.rating .rateposition {
10  position: absolute;
11  right: 0px;
12}
13
14.rating .rate {
15  display: inline-block;
16  font-weight: bold;
17  background-color: #1e90ff;
18  color: #ffff;
19  text-align: center;
20  margin-left: 5px;
21  padding: 3px 5px;
22  border-radius: 2px;
23}
24
25.hotelinfo .price {
26  /*反映されないbackground*/
27  background-color: red;
28  width: 350px;
29  font-size: 22px;
30  font-weight: bold;
31  position: relative;
32}
33/*問題の部分*/
34.price span {
35  display: inline-block;
36  color: #cd5c5c;
37  position: absolute;
38  right: 0px;
39  bottom:0px;
40}
41

退会済みユーザー

2019/02/09 13:42

たくさんの回答を回答者はされていますが、だんだん作業依頼のように感じられてきました。自分で調べたことがあったら記載をよろしくお願いします。

m.ts10806

2019/02/10 00:45

htmlとcssの区別くらいはつけられたほうが良いかと。丸投げ作業依頼も程ほどに。質問になってません

yoshinavi

2019/02/10 01:24

提示のコードをコピペしたら、下に来てますよ。

Chandler_Bing

2019/02/10 03:35

またなぜbacgroundcolorがつかないのでしょうか。

m.ts10806

2019/02/10 05:33

こちらを一通り無視しておいて「また」とは。そもそもスペルミスのままコメントしてるわけですし。「そのように組んでるから」でしょ。自分が思った通りに動く訳じゃなく、書いた通りに動くわけだから

行動規範の内容に同意します

回答1件

ベストアンサー

コメント部分の

またなぜbacgroundcolorがつかないのでしょうか。

HTMLを良く見てください。<span>設定がされています。以下を追加してみてください。

CSS
1.price span {
2  background-color: red;
3}

投稿2019/02/10 03:50

yoshinavi

総合スコア3523

Chandler_Bing

2019/02/10 03:56

ありがとうございます。ただ、div要素にバックグラウンドをつけたいです。

yoshinavi

2019/02/10 04:11

親要素の高さが「0」なので、高さを確保すれば色は反映されますよ。しかし親の要素全体につきますので、子要素のテキスト部分のみに背景色を設定したいのであれば、子要素に設定するしかありません。

Chandler_Bing

2019/02/10 05:45

ありがといございます。background-color: red;を .hotelinfo .tags { width: 350px; margin-bottom: 50px; background-color: red; } につけると反映されます。.hotelinfo .tagsには同じく高さが設定されていません。

行動規範の内容に同意します