Question

我有一些侧面导航的代码可以滑入查看。但是，因此，标题被向下推。我搜索后发现我应该使用position：relative，但是已经设置好了。

function openNav(){document.getElementById('navBar').style.width='250px';}function closeNav(){document.getElementById('navBar').style.width='0';}

/* Start of CSS */


/* Font Import */

@import url('https://fonts.googleapis.com/css?family=Niramit:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i');

/* Font Import End */


/* BG Chop Fix */

html,
body {
  min-height: 100%;
}

body {
  height: 100%;
}


/* BG Chop Fix End*/


/* Default Margin Padding Reset */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}


/* Default Margin Padding Reset End */


/* Styling Start */

.root {
  font-family: "Niramit", sans-serif;
  z-index: 0;
}

.topHeader {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 15%;
  width: 100%;
  position: fixed;
  background-color: #ffc796;
  box-shadow: 0 0 5px 1px grey;
}

.thLogo {
  margin-left: 15px;
}

.thNav {
  margin-left: auto;
  margin-right: 15px;
}


/* The side navigation menu */

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 2;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  /* 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: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  z-index: 2;
  /* Stay on top */
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
  color: #f1f1f1;
}


/* Position and style the close button (top right corner) */

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  z-index: 2;
  /* Stay on top */
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

.site {
  margin-top: 85.19px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>FrenConn</title>
</head>

<body>
  <div class='root'>
    <div class='sidenav' id='navBar'>
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="home.php">About</a>
    </div>
    <div class='topHeader'>
      <div class='thLogo'>
        <h1>Fr.</h1>
      </div>
      <div class='thNav'>
        <span onclick="openNav()"><h2>Menu</h2></span>
      </div>
    </div>
    <div class='site'>
    </div>
  </div>
</body>

</html>

我使用了检查元素，而罪魁祸首似乎是关闭按钮，因为它的填充与页面顶部和页眉之间的间隙匹配。

如何定位：相对对象不影响其他元素

0 个答案: