html - 在我的网站中，两个元素相互重叠

Question

我使用的框架叫做 Materialize

当添加另一个元素时，它以某种方式结束在它上面的元素的下方，我从来没有告诉它在覆盖容器下放置或放置它。我只是给它一个 z-index 看看它是否真的在它下面并且确实是这样。每次我尝试添加一个元素时，它都会在封面容器的正下方

    <div class="absolute">  
<div class="backgroundSettings" id="homeHero">



  <nav class="transparent adjustNav">  

   <div class="nav-wrapper">
  <a href="#" class="brand-logo left z-depth-3"><img src="images/me.jpg" class="circle meNav" id="navPic" /></a>
  <ul id="nav-mobile" class="right hide-on-med-and-down">
    <li><a class="editNav" href="...">Work</a></li>
    <li><a class="editNav" href="...">Blog</a></li>
    <li><a  href="..." class=" waves-effect waves-light btn-large blue darken-3"><i class="material-icons left">person</i>Hire Me!</a></li>
  </ul>
</div>
</nav>

<div class="centerME">
<img src="https://ibin.co/2m261AYwrczY.png"  id="logo2" class=" "/>
</div>
</div>

</div>
<div class="absolute">
<p>
Jonthue
</p>

</div>
<p>
 hi
 okkokok
</p>

https://jsfiddle.net/JonthueM/2fLm3dd8/ http://codepen.io/JonthueM/pen/yJgZBb

Answer 1

这是 Working Fiddle

您已申请 position:absolute至 .backgroundSettings这就是 html content 的原因在此之后 <div class='backgroundSettings'>会来到它下面， 因为 position:absolute设置 html element 的位置这样它就不会影响任何其他 html element在其父项中出现在它之后或之前。

你必须使用position:relative如果你想要 divs or any html element来了side by side, edge by edge, next after previous .

希望你理解得很好:)

谢谢