0

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

<!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>
.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;
}

2
  • それぞれの画像のサイズを教えていただけませんか?
    – supa
    Commented 2021年12月24日 4:59
  • @supa list16-1は120px:160px, list16-2は86px:128pxです。
    – Suzu
    Commented 2021年12月24日 5:42

1 件の回答 1

0

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

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

.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;
}
<!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>

1
  • @supa 無事配置が正しく出来ました。ありがとうございました!
    – Suzu
    Commented 2022年1月4日 2:00

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。