画像にnaviとロゴを重ねたい

前提・実現したいこと

naviがロゴにくっついているのをnaviだけ右寄せにしたい

発生している問題・エラーメッセージ

BootStrapで作ったスライドの画像に重ねたら、ナビのfloatが効かず、ロゴの横に来ている

該当のソースコード

html
1 <!DOCTYPE html>
2 <html lang="ja">
3 <head>
4     <meta charset="UTF-8">
5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
8     <link rel="stylesheet" href="rennshuu.css">
9     <title>Document</title>
10 </head>
11 <body>
12    <div class="logo">
13        <img   src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
14       <nav>
15         <ul>
16           <li>TOP</li>
17           <li>PRODUDT</li>
18           <li>ABOUT</li>
19           <li>NEWS</li>
20           <li>CONTACT</li>
21         </ul>
22        </nav>
23      </div>
24    
25
26      <div id="carouselExampleSlidesOnly" class="carousel slide  carousel-fade" data-bs-ride="carousel">
27        <div class="carousel-inner">
28          <div class="carousel-item active">
29            <img src="http://placehold.jp/ff0000/fffff/1000×700.png" class="d-block " alt="...">
30          </div>
31          <div class="carousel-item">
32            <img src="http://placehold.jp/0000ff/fffff/1000×700.png" class="d-block  "alt="...">
33          </div>
34          <div class="carousel-item">
35            <img src="http://placehold.jp/008000/fffff/1000×700.png" class="d-block " alt="...">
36          </div>
37          <div class="carousel-item">
38            <img src="http://placehold.jp/ffff00/fffff/1000×700.png" class="d-block " alt="...">
39          </div>
40        </div>
41      </div>
42      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
43 </body>
44 </html>
45

css
1 img {
2     position: relative;
3    width: 100%;
4    height: 600px;
5    z-index: 1;
6}
7
8.logo img {
9    height: 30px;
10    width: 30px;
11    float: left;
12  
13}
14 
15.logo {
16    position: absolute;
17    z-index: 2;
18
19}
20
21 nav ul li {
22     float: right;
23    margin-left: 20px;
24    list-style: none;
25    text-decoration: none;
26    
27}

試したこと

logo、navそれぞれにdivを付けたら重ねられなかった

補足情報（FW/ツールのバージョンなど）

HTML5 css3
bootstrap v5.0.0-bete

agumon

2021/08/27 03:47

質問内容が理解できませんでした。これだと画像がみれないのでダミー画像に置き換える（http://placehold.jp/）などしてもう少しわかりやすく説明お願いします。

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

回答1件

ベストアンサー

補足ありがとうございます。理解しました。

float をやめて flex を使うのがシンプルだと思います。

css
1.logo {
2  display: flex;
3  justify-content: space-between;
4  width: 100%;
5}
6
7logo img {
8  height: 30px;
9  width: 30px;
10  float: left; // <- これは削除
11}