Question

我正在构建用于作业的网页。我有一个问题，我的孩子div的宽度超出了其父div的宽度。

所以我希望我的子div（称为<div class="dropdown-content">）具有绝对位置，因为它使子div与父div（称为<div class="box">）重叠。但是，子div的宽度并不相对于父div的宽度。

我尝试了{：{1}}上的相对位置，但是所有父div悬停时都会展开，以使子div与父div重叠。

那么如何在保持父div宽度不变的同时使子div与父div重叠？

链接到网页：http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_01/Lb1Labs.html

<div class="dropdown-content">

/*For each individual box.*/
.box{
  border: 1px solid black;
  min-width: 20%;
  margin: 0;
  background-color: #FFFFFF;
}

/*Creates the styling of the dropdown box.*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #62ff36;
  box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
  padding-top: 12px;
  z-index: 1;
}

.inside-box:hover .dropdown-content {
	display: block; 
}

Answer 1

只需在您的width:100%类上添加一个dropdown-content，并在position:relative上添加一个box，以确保正是所选父级的宽度。

默认情况下，绝对元素将适合其内容。

如何在保持绝对位置的同时使子div适应父div宽度？

1 个答案: