

list16及びlist17のブロックが重なってしまい困っています。  
list16の要素に指定したposition:absolute;をコメントアウトすると二つの要素が離れることからこれが原因だと思うのですがこれはどうして起こるのでしょうか。  
list17にmarginを指定してもtopのmarginが効かず重なったままです。解決方法をが回答よろしくお願いします。

[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;, position</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><br/>
           </div>
        </div>
        <div class="list16-4">
            position:fixed;
        </div><br/>
    
        <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; /*floatがついた画像の次のpは横に回り込む。pにfloatを指定する必要はない*/
      color: black;
      margin: 0, 0, 100px, 0;
    }
    
    .list16-2 {
      float: left;
    }
    #list16-2 {
      clear: left; /*clearが指定されると前にfloatがついているプロパティが存在していても横に回り込む必要はない*/
    }
    .list16-3 {
      display: flex;
      position: absolute;
      left: 50px;
    }
    #list16-3 {
      width: 200px;
      height: 150px;
      margin: 40px;
      border: solid 2px;
    }
    #list16-4 {
      overflow: hidden; /*枠からはみ出したところが非表示になる*/
      width: 200px;
      height: 150px;
      margin: 40px;
      border: solid 2px;
      position: relative;
      left: 30%; /*親要素である.list16-3に相対してpositionが設定される*/
    }
    .list16-4 {
      color: white;
      background: rgb(238, 108, 77);
      font-size: 1.5rem;
      position: fixed;
      top: 0;
      right: 0;
    }
    .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-26T22:51:56.927
85345
2021-12-26T22:51:56.927
48605
question
html css
position:absolute;の後のブロックが重なる