相对Div元素未注册绝对定位的孩子

Question

好吧，所以，我还是相当新的CSS和HTML，并遇到了另一个问题。我似乎无法在这里找到我的问题，但我希望如果有人发现它已被问及答案，我会被重定向。无论如何，我使用flex-box并尝试在包装div元素中水平对齐这三个框。三个盒子本身相对定位，每个盒子内有一个绝对定位的矩形。所以一个div，围绕着三个div盒，每个div包围一个矩形div。

image example

我设法将它们水平对齐，但我发现了一个问题。三个框内的矩形div设置为＆＃34; pull＆＃34;从盒子的侧面出来，并在前面形成一个带有工具提示的带子。我还没有开始在第三个盒子上工作，因为只有第一个盒子才能正常工作。由于某种原因，第二个盒子不起作用，其乐队的绝对定位似乎是锁定在标题上。因此，它不是从盒子的侧面拉出来，而是从屏幕的顶部拉出来。

image example

当我删除第一个框时，第二个框工作得非常棒。但他们两个在一起，第一个作品，第二个错误。在第二个div中包装故障框可以防止出现问题。此外，当我尝试查看明显无效的div的位置时，边框不显示，并且在div的HTML中输入的字母显示在框的图像之外。元素下方还有一个小点，或者有时会出现在它旁边，在悬停时触发工具提示。

可能是什么错误？两个盒子是否以某种方式相互作用并相互滑动？我错过了什么吗？求救！

＆＃13;

＆＃13;

#bodyWrap {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}


/* (1st) thumbnail begin */

.icon01 {
  height: 177px;
  width: 177px;
  position: relative;
  text-align: center;
  background-color: #ff0000;
}

.icon01 img {
  border: 1px solid #000000;
}

.expThumb {
  position: relative;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.tooltip {
  position: absolute;
  width: 0;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.band {
  position: absolute;
  width: 0;
  height: 88px;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.icon01:hover .tooltip {
  width: 177px;
  visibility: visible;
  opacity: 1;
}

.icon01:hover .band {
  width: 178px;
  visibility: visible;
  opacity: 1;
}

.icon01:click .expThumb
/* (1st) thumbnail end */


/* (2nd) thumbnail begin */

.icon02 {
  height: 177px;
  width: 177px;
  position: relative;
  text-align: center;
  background-color: #ff0000;
}

.icon02 img {
  border: 1px solid #000000;
}


/* insert expanded image here
. {
	position:absolute;
	top:0;
	opacity:0;
	visibility:hidden;
	z-index:6;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
*/

.tooltip2 {
  position: absolute;
  width: 0;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.band2 {
  position: absolute;
  width: 0;
  height: 88px;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.icon02:hover .tooltip2 {
  width: 177px;
  visibility: visible;
  opacity: 1;
}

.icon02:hover .band2 {
  width: 178px;
  visibility: visible;
  opacity: 1;
}

.icon02:click .expThumb2
/* (2nd) thumbnail end */

＆＃13;

<div id="bodyWrap">


  <div class="icon01">
    <a href="#info">
      <img src="img/thumb.jpg" alt="box">
      <img class="expThumb" src="img/thumb2.png">
      <h2 class="tooltip">aTip</h2>
      <div class="band"></div>
    </a>
  </div>



  <div class="icon02">
    <a href="#info">
      <img src="img/thumb_announce.jpg" alt="box">
      <img class="" src="">
      <h2 class="tooltip2">aTip</h2>
      <div class="band2"></div>
    </a>
  </div>



  <div class="icon03">
    <a href="#info">
      <img src="img/thumb_announce.jpg" alt="box">
      <img class="" src="">
      <h2 class="tooltip3">aTip</h2>
      <div class="band3"></div>
    </a>
  </div>

  <div id="info" class="active">
    <p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

仅.icon01为position: relative;。其他父母.icon02, .icon03静态定位。

您可以使用子组合子选择器制作这些div relative，或者您可以为它们提供所有公共类并以此方式定位它们，或者您可以.icon01, .icon02, .icon03 { position: relative; }。我在这里使用了儿童组合选择器。

＆＃13;

＆＃13;

#bodyWrap > div {
  position: relative;
}

#bodyWrap {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}


/* (1st) thumbnail begin */

.icon01 {
  height: 177px;
  width: 177px;
  position: relative;
  text-align: center;
  background-color: #ff0000;
}

.icon01 img {
  border: 1px solid #000000;
}

.expThumb {
  position: relative;
  top: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 3;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.tooltip {
  position: absolute;
  width: 0;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  z-index: 2;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.band {
  position: absolute;
  width: 0;
  height: 88px;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.icon01:hover .tooltip {
  width: 177px;
  visibility: visible;
  opacity: 1;
}

.icon01:hover .band {
  width: 178px;
  visibility: visible;
  opacity: 1;
}

.icon01:click .expThumb
/* (1st) thumbnail end */


/* (2nd) thumbnail begin */

.icon02 {
  height: 177px;
  width: 177px;
  position: relative;
  text-align: center;
  background-color: #ff0000;
}

.icon02 img {
  border: 1px solid #000000;
}


/* insert expanded image here
. {
	position:absolute;
	top:0;
	opacity:0;
	visibility:hidden;
	z-index:6;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
*/

.tooltip2 {
  position: absolute;
  width: 0;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  z-index: 5;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.band2 {
  position: absolute;
  width: 0;
  height: 88px;
  top: 25%;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.icon02:hover .tooltip2 {
  width: 177px;
  visibility: visible;
  opacity: 1;
}

.icon02:hover .band2 {
  width: 178px;
  visibility: visible;
  opacity: 1;
}

.icon02:click .expThumb2
/* (2nd) thumbnail end */

＆＃13;

<div id="bodyWrap">


  <div class="icon01">
    <a href="#info">
      <img src="img/thumb.jpg" alt="box">
      <img class="expThumb" src="img/thumb2.png">
      <h2 class="tooltip">aTip</h2>
      <div class="band"></div>
    </a>
  </div>



  <div class="icon02">
    <a href="#info">
      <img src="img/thumb_announce.jpg" alt="box">
      <img class="" src="">
      <h2 class="tooltip2">aTip</h2>
      <div class="band2"></div>
    </a>
  </div>



  <div class="icon03">
    <a href="#info">
      <img src="img/thumb_announce.jpg" alt="box">
      <img class="" src="">
      <h2 class="tooltip3">aTip</h2>
      <div class="band3"></div>
    </a>
  </div>

  <div id="info" class="active">
    <p>blahlbahlbahlbhalbhalbhalbhalbhalbhalbhalbhalah</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;