相互重叠的部分

Question

每个部分都与“主屏幕”重叠。部分。这是实时链接Hello Sylhet。 但该页面应该是

Answer 1

问题是在position:absolute上使用section#home-screen属性不正确。此部分被其后的元素所覆盖。您需要使用margin-top或空div进一步向下推送元素，以便#home-screen可见。

试试这个CSS：

#icon-search {
    margin-top:60%;
}

尝试修改此属性的值和section#home-screen的高度，以获取您正在寻找的显示。

注意1：正如评论中正确提到的@Obsidian Age，如果你使用JS Fiddle，Codepen等复制你的问题，你可以很快得到代码的精确答案。

注意2：如果您需要一条建议，请不要将#home-screen置于绝对位置。 position:absolute很棘手，特别是如果它不在position:relative块元素内。除非你absolute（双关语）需要使用它，否则尽量避免使用它。将#home-screen设为弹性框，然后以负边距向上推动下一部分。运行以下代码段以查看示例。

＆＃13;

＆＃13;

.home-screen,
.icon-search {
  display:flex;
  align-items:center;
  justify-content:center;
}

.home-screen {
  border:1px solid red;
  height:60vh;
}
.icon-search {
  background-color:#fff;
  justify-content:space-around;
  margin: -25px auto 0;
  height:50px;
  width:90%;
  border:1px solid blue;
  border-radius: 25px;
}

＆＃13;

<div class="home-screen">
  <div class="searchbox">Search me <input type="text"></div>
</div>
<div class="icon-search">
  <div class="icons">icon1 icon2 icon3</div>
</div>

＆＃13;

＆＃13;

＆＃13;