修复了侧边栏重叠的页面内容？-前端问题

fixed sidebar overlapping page content?(修复了侧边栏重叠的页面内容？)

本文介绍了修复了侧边栏重叠的页面内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用css和html制作了一个侧边栏。然而，无论我做什么，当我试图在我的HTML页面上放入一些内容时，它都会放在页面的左上角，在侧边栏下面。如何将固定内容放置在页面的右侧？

下面显示的是我的css代码，如果有什么东西阻止主要内容位于页面的右中心，请告诉我。数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  overflow: auto;
  text-align: left;
  margin-left: 30px;
}

<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="sidebar">
    <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of Content</a>
    <p><u>Visual Communication:</u></p>
    <bl>
      <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
      <a id='three' class='click' href="Illustration.html">Illustration</a>
      <a id='four' class='click' href="Photography.html">Photography</a>
      <p><u>Multi Media/Digital Media:</u></p>
      <a id='five' class='click' href="Scripting.html">Scripting</a>
      <a id='six' class='click' href="Sound.html">Sound</a>
      <p><u>Programming:</u></p>
      <a id='seven' class='click' href="Coding.html">Coding</a>
      <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
      <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
      <p><br></p>
  </div>

  <!-- Page content -->
  <p>Testing</p>


</body>

</html>

推荐答案

您需要首先定义FlexBox布局以从左到右组织内容，这与默认的从上到下的HTMLDOM行为形成对比。要做到这一点，首先将整个容器包装在div中，然后在其上应用display: flex。然后将flex-direction: row设置为从左到右进行排序。但是，当您将块定义为position: fixed时，它将从文档模型中取出，因此您的右侧内容将显示在左侧fixed位置块下。要解决这一问题，请在右侧内容上加上左边距(根据左侧容器的宽度，约为15%)。

我对HTML文件进行了几处更改以应用FlexBox：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.sidebar a {
  display: block;
  padding: 10px;
}

body {
  background-color: white;
}

.sidebar {
  margin: 14px;
  padding: 0;
  width: 175px;
  position: fixed;
  height: 100%;
  text-align: left;
  margin-left: 30px;
}

.main {
  display: flex;
  flex-direction: row;
}

.content {
  margin-top: 20px;
  margin-left: 15%;
}

<!DOCTYPE HTML>
<html lang="en" dir="ltr">

<head>
  <link href="myMenuStyle.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?    family=Bungee+Hairline&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <meta charset="utf-8">
  <link rel="import" href="TableOfContent.html">
  <title>about me</title>
  <link rel="icon" href="cool.ico">

</head>

<body>
  <!-- The sidebar -->
  <div class="main">
    <div class="sidebar">
      <a id='one' href="TableOfContent.html" style="font-weight: bold">Table of 
    Content</a>
      <p><u>Visual Communication:</u></p>
      <bl>
        <a id='two' class='click' href="GraphicD.html">Graphic Design</a>
        <a id='three' class='click' href="Illustration.html">Illustration</a>
        <a id='four' class='click' href="Photography.html">Photography</a>
        <p><u>Multi Media/Digital Media:</u></p>
        <a id='five' class='click' href="Scripting.html">Scripting</a>
        <a id='six' class='click' href="Sound.html">Sound</a>
        <p><u>Programming:</u></p>
        <a id='seven' class='click' href="Coding.html">Coding</a>
        <a id='eight' class='click' href="Game.html">Interactive/Game Design</a>
        <a id='nine' class='click' href="Arduino.html">Hardware/Electrical Circuit</a>
        <p><br></p>
    </div>

    <!-- Page content -->
    <div class="content">
      <p>Testing</p>
    </div>

  </div>
</body>

</html>

有关Flexbox的详细信息-here

这篇关于修复了侧边栏重叠的页面内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！