85451


二つの要素が重なってしまい困っています。  
1.list16-1,
list16-2にそれぞれmarginを設定しているのですがlist16-2の要素がlist16-1に重なってしまい、全画面で表示すると上の画像の横にしたの画像が表示されるようになってしまいます。これはmarginの指定の問題ではないのでしょうか。この画像をlist16-1の下に別のブロックとして持ってくるための解決方法を教えていただきたいです。  
2.list17のブロックがlist16に重なってしまいます。position:relative;を設定していることが原因なのかとも思いましたがlist17にtopの値を設定しても要素がさがりません。これは何が原因でしょうか。併せてご回答いただけると嬉しいです。

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Tutorial</title>
        <link rel="stylesheet" href="style.css">
       </head>
    <body>
        <h3>float, clear, overflow: hidden;</h3>
        <div class="list16-1">
        <img src="background9.jpeg">
        </div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam adipisci dolore odit reiciendis dolorem tempora asperiores rerum deserunt, qui consequatur quibusdam ipsum assumenda fuga debitis aspernatur. A sint facere libero.</p><br/>
        <div class="list16-2">
            <img src="background10.jpeg">
        </div>
        <p id="list16-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, neque.</p><br />
        <p id="list16-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, odio.</p> <br/>
        <div class="list16-3">
           <div id="list16-3">
           <img src="background11.png">
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente enim temporibus quo ad! Totam a minus, at iure nobis illo harum eius ad esse voluptate, possimus veniam commodi officiis temporibus.</p><br/>
        </div>
        <div id="list16-4">
            <img src="background11.png">
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, ex, praesentium blanditiis molestiae corporis ut quam placeat, tenetur dolore possimus magnam temporibus maxime aspernatur perspiciatis est quae sequi deleniti. At dolorum non, recusandae cumque excepturi, ducimus suscipit repudiandae nulla saepe laboriosam officia repellat deleniti illum sit beatae quas aliquam eveniet.</p>
        </div>
    <h3>z-index</h3>
        <div class="list17">
        <div id="list17-1"> list17-1 </div>
        <div id="list17-2"> list17-2 </div>
        </div>
    </body>
    </html>
    
[/code]

[code]

    .list16-1 {
      float: left;
      color: black;
      margin: 0, 0, 100px, 0;
    }
    
    .list16-2 {
      float: left;
    }
    #list16-2 {
      clear: left; 
    }
    .list17 {
      border: 2px solid rgb(0, 0, 87);
      width: 300px;
      height: 150px;
      position: relative;
      text-align: center;
      font-size: 1.5rem;
      line-height: 90px;
    }
    #list17-1,
    #list17-2 {
      position: absolute;
    }
    
    #list17-1 {
      color: rgb(40, 54, 24);
      background: rgb(96, 108, 56);
      width: 150px;
      height: 90px;
      z-index: 100;
      top: 0;
      left: 0;
    }
    #list17-2 {
      color: rgb(40, 54, 24);
      background: rgb(181, 131, 141);
      width: 150px;
      height: 90px;
      top: 50px;
      left: 50px;
      z-index: 0;
    }
    
    
[/code]


CC BY-SA 4.0
2021-12-24T04:55:10.463
85317
2022-01-02T16:00:38.547
2021-12-24T08:03:39.157
48605
48605
question
html css
二つの要素が重なってしまう


まず、 `margin` プロパティで値の間にカンマは不要です。これがあることで `margin`
プロパティ自体が認識されず余白が生じないので、修正します。

次に現状では `float` プロパティによって左へ浮動した `.list16-1` と段落に続いて、さらに左へ浮動している `.list16-2`
があります。このため、 `.list16-2`
が通常のフローに従いつつも左へ浮動した結果、そのような結果となっています。適宜浮動要素に後続するものをクリアすることで問題を解決できます。

[code]

    .list16-1 {
      float: left;
      color: black;
      margin: 0 0 100px 0;
    }
    
    .list16-2 {
      float: left;
    }
    
    #list16-2 {
      clear: left;
    }
    
    .list17 {
      border: 2px solid rgb(0, 0, 87);
      width: 300px;
      height: 150px;
      position: relative;
      text-align: center;
      font-size: 1.5rem;
      line-height: 90px;
    }
    
    #list17-1,
    #list17-2 {
      position: absolute;
    }
    
    #list17-1 {
      color: rgb(40, 54, 24);
      background: rgb(96, 108, 56);
      width: 150px;
      height: 90px;
      z-index: 100;
      top: 0;
      left: 0;
    }
    
    #list17-2 {
      color: rgb(40, 54, 24);
      background: rgb(181, 131, 141);
      width: 150px;
      height: 90px;
      top: 50px;
      left: 50px;
      z-index: 0;
    }
    
    .box {
      display: flow-root;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS Tutorial</title>
      <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
      <h3>float, clear, overflow: hidden;</h3>
      <div class="box">
        <div class="list16-1">
          <img src="https://placehold.jp/120x160.png?text=background9.jpeg">
        </div>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam adipisci dolore odit reiciendis dolorem tempora asperiores rerum deserunt, qui consequatur quibusdam ipsum assumenda fuga debitis aspernatur. A sint facere libero.</p>
      </div>
      <div class="list16-2">
        <img src="https://placehold.jp/86x128.png?text=background10.jpeg">
      </div>
      <p id="list16-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, neque.</p><br />
      <p id="list16-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, odio.</p> <br />
      <div class="list16-3">
        <div id="list16-3">
          <img src="background11.png">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente enim temporibus quo ad! Totam a minus, at iure nobis illo harum eius ad esse voluptate, possimus veniam commodi officiis temporibus.</p><br />
        </div>
        <div id="list16-4">
          <img src="background11.png">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, ex, praesentium blanditiis molestiae corporis ut quam placeat, tenetur dolore possimus magnam temporibus maxime aspernatur perspiciatis est quae sequi deleniti. At dolorum non, recusandae
            cumque excepturi, ducimus suscipit repudiandae nulla saepe laboriosam officia repellat deleniti illum sit beatae quas aliquam eveniet.</p>
        </div>
        <h3>z-index</h3>
        <div class="list17">
          <div id="list17-1"> list17-1 </div>
          <div id="list17-2"> list17-2 </div>
        </div>
      </div>
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2022-01-02T16:00:38.547
85451
2022-01-02T16:00:38.547
32986
85317
answer