避免div在彼此之上

Question

我正在尝试制作投资组合页面。我创建了一个嵌套在里面的div的部分。该部分顶部的前两个设置为相对，它们工作。我试图将其余部分设置为亲戚，并且它们显示在前两个div之上。救命啊！

＆＃13;

＆＃13;

#portfolio {
  width: 650px;
  background-color: white;
  margin-left: 75px;
  margin-top: 120px;
  margin-right: 40px;
  margin-bottom: 200px;
  padding: 15px;
  float: left;
  border: 1px solid #dddddd;
  overflow: auto;
  clear: both;
}

#blog {
  position: relative;
  float: left;
  width: 40%;
}
#blog img{
  float: left;
  width: 100%;
  margin-right: 10px;
  position: absolute;
}
#blog p {
  margin: 0;
  position: absolute;
  top: 125px;
  color: white;
  background-color: #41AAA5;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 20px;
}
#hangman {
  position: relative;
  float: right;
  width: 40%;
}
#hangman img{
  float: left;
  width: 100%;
  position: absolute;
}
#hangman p {
  margin: 0;
  position: absolute;
  top: 125px;
  color: white;
  background-color: #41AAA5;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 20px;
}
#playlist {
  position: relative;
  float: left;
  width: 40%;
}
#playlist img {
}
#playlist p {
}

＆＃13;

<section id="portfolio">
  <div id="blog">
    <img src="assets/images/icon1.jpg">
    <p>Blog</p>
  </div>
  <div id="hangman">
    <img src="assets/images/icon2.jpg">
    <p>Hangman Game</p>
  </div>
  <div id="playlist">
    <img src="assets/images/icon3.jpg">
    <p>Playlist</p>
  </div>
  <div id="maps">
    <img src="assets/images/icon4.jpg">
    <p>Map Page</p>
  </div>	
    <div id="pets">
    <img src="assets/images/icon5.jpg">
    <p>Pets</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

博客中的 img标记上的positon:absolute和 hangman divs 导致此问题。位置：绝对元素不选择高度，这就是为什么一切都重叠。

  

这是您更新的代码：

＆＃13;

＆＃13;

#portfolio {
  width: 650px;
  background-color: white;
  margin-left: 75px;
  margin-top: 120px;
  margin-right: 40px;
  margin-bottom: 200px;
  padding: 15px;
  float: left;
  border: 1px solid #dddddd;
  overflow: auto;
  clear: both;
}

#blog {
  position: relative;
  float: left;
  width: 40%;
}

#blog img {
  float: left;
  width: 100%;
  margin-right: 10px;
}

#blog p {
  margin: 0;
  position: absolute;
  top: 125px;
  color: white;
  background-color: #41AAA5;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 20px;
}

#hangman {
  position: relative;
  float: right;
  width: 40%;
}

#hangman img {
  float: left;
  width: 100%;
}

#hangman p {
  margin: 0;
  position: absolute;
  top: 125px;
  color: white;
  background-color: #41AAA5;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  font-size: 20px;
}

#playlist {
  position: relative;
  float: left;
  width: 40%;
}

#playlist img {}

#playlist p {}

＆＃13;

<section id="portfolio">
  <div id="blog">
    <img src="https://dummyimage.com/600x400/000/fff&text=blog">
    <p>Blog</p>
  </div>
  <div id="hangman">
    <img src="https://dummyimage.com/600x400/f00/fff&text=hangman">
    <p>Hangman Game</p>
  </div>
  <div id="playlist">
    <img src="https://dummyimage.com/600x400/0f0/fff&text=playlist">
    <p>Playlist</p>
  </div>
  <div id="maps">
    <img src="https://dummyimage.com/600x400/00f/fff&text=maps">
    <p>Map Page</p>
  </div>
  <div id="pets">
    <img src="https://dummyimage.com/600x400/ff0/fff&text=pets">
    <p>Pets</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;