Question

如何防止页面内容与（绝对定位的）标题元素重叠？

对不起，因为我很难解释。

这是我的代码的JSFiddle链接： https://jsfiddle.net/980vfb3o/

/* CSS */
        body {
    background-color: #FFFFFF !important;
    margin:0 auto;
    padding: auto;
}

/*The Color of the Header */

.headerstyle {
    background-color: #4CBFBC;
    width: 100%;
    height: 36px;
    padding: 0px;
    margin: 0px;
    position: absolute;
}


/* The Three Line Menu */

.menu {
    width: 25px;
    height: 2px;
    background-color: black;
    margin: 6px 0;
    padding: 2px;
    position: relative;
    left: 3px;
}


#item {
    font: 14px Arial;
    text-align: center;
    padding: 0 auto;
}


.img-responsive {
    display: block;
    margin: auto;
    padding: 0 auto;
    width: 100px;
    min-width: 65px;
}

HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Codementary - Coding is Life</title>
</head>

<body>
    <header class="headerstyle">
        <div id="headerstyle"></div>

        <!-- The three line Menu -->
        <span onclick="openNav()">
                <div class="menu"></div>
                <div class="menu"></div>
                <div class="menu"></div>
            </span>
    </header>

    <!-- MAIN Body Elements -->

    <!-- HTML Section -->
    <section div="items">
        <section class="fblock">
            <img src="img/html5.png" class="img-responsive" draggable="false" />
            <span class="dtxt"><h4><b>HTML5</b></h4>
            <p>Learn HTML5 from top to bottom and Implementing it on how to use it on Making real webpages.</p></span>
        </section>

        <hr>

    </section>

</body>

</html>

Answer 1

我不完全确定我是否理解，但如果您尝试增加绝对定位导航栏底部与其他内容之间的空间，那么您可以只需在相对定位的内容中的第一个元素上方添加一个边距，在这种情况下，HTML标题周围的<h4>标记：

https://jsfiddle.net/980vfb3o/2/

希望这有帮助！

Answer 2

您需要将top: 0添加到标题，并margin-top: 36px（header的高度）添加到section。我修复了HTML标记（将<section div="items">替换为<section class="items">）。演示：

＆＃13;

function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

＆＃13;

body {
  background-color: #FFFFFF !important;
  margin: 0 auto;
  padding: auto;
}

/*The Color of the Header */
.headerstyle {
  background-color: #4CBFBC;
  width: 100%;
  height: 36px;
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 0; /* new */
}

/* The Three Line Menu */
.menu {
  width: 25px;
  height: 2px;
  background-color: black;
  margin: 6px 0;
  padding: 2px;
  position: relative;
  left: 3px;
}

/* Opened SideNav */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #4CBFBC; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 22.4px;
  color: #302F2D;
  display: block;
  transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover,
.offcanvas a:focus {
  color: #FFFFFF;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#snav {
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

#item {
  font: 14px Arial;
  text-align: center;
  padding: 0 auto;
}

hr {
  width: 90%;
}

.img-responsive {
  display: block;
  margin: auto;
  padding: 0 auto;
  width: 100px;
  min-width: 65px;
}

.dtxt {
  text-align: center;
  width: 100%;
}

.pre-footer {
  text-align: center;
  width: 100%;
}

/* new */
.items {
  margin-top: 36px;
}

＆＃13;

<header class="headerstyle">
  <div id="headerstyle"></div>

  <!-- Side Navigation Bar Items -->
  <div id="snav">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="home.html"><i class="glyphicon glyphicon-home"> Home</a></i>
      <a href="feedback.html"><i class="glyphicon glyphicon-comment"> Feedback</a></i>
      <a href="settings.html"><i class="glyphicon glyphicon-cog"> Settings</a></i>
      <a href="about.html"><i class="fa fa-code">   About</a></i>
    </div>
  </div>

  <!-- The three line Menu -->
  <span onclick="openNav()">
                <div class="menu"></div>
                <div class="menu"></div>
                <div class="menu"></div>
            </span>
</header>

<!-- MAIN Body Elements -->

<!-- HTML Section -->
<section class="items">
  <section class="fblock">
    <img src="img/html5.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>HTML5</b></h4>
            <p>Learn HTML5 from top to bottom and Implementing it on how to use it on Making real webpages.</p></span>
  </section>

  <hr>

  <!-- CSS Section -->
  <section class="sblock">
    <img src="img/css3.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>CSS3</b></h4>
            <p>Learn on how to style HTML Elements and make them look elegant using CSS3.</p></span>
  </section>

  <hr>

  <!-- Javascript Section -->
  <section class="tblock">
    <img src="img/js.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>Javascript</b></h4>
            <p>Learn how to adjust Behaviour of your HTML and CSS Elements using Javascript.</p></span>
  </section>

  <hr>

  <!-- SQL Section -->
  <section>
    <img src="img/sql.png" class="img-responsive" draggable="false" />
    <span class="dtxt"><h4><b>SQL</b></h4>
            <p>Learn how to manage Database using SQL.</p></span>
  </section>
</section>

<hr>

<div class="pre-footer">
  <p>More Tutorial/Courses Coming soon.</p>
</div>

＆＃13;

防止与绝对定位的元素重叠

2 个答案: