问相互重叠的部分
EN

Stack Overflow用户

提问于 2017-09-04 07:57:31

回答 1查看 985关注 0票数 0

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

html

bootstrap-4

回答 1

Stack Overflow用户

发布于 2017-09-04 08:06:07

问题是不正确地使用section#home-screen上的position:absolute属性。此部分将被后面的元素覆盖。您需要使用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块元素中时。尽量避免它，除非你absolutely (双关语)需要使用它。将#home-screen设置为flexbox，然后将下一部分向上推，并留出负边距。运行以下代码片段以查看示例。

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

<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46028802

复制

相似问题

问相互重叠的部分
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相互重叠的部分EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相互重叠的部分
EN