时间戳

首页 > 解决方案 > html和css中的位置问题

html - html和css中的位置问题

问题描述

预期的

预期的用户界面

位置：固定

[当我使用位置：固定]

移除位置：固定

[当我使用删除位置：固定]

我的 html

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container-fluid .wrapper {
  display: flex;
    position: relative;
}

.container-fluid .wrapper .sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0;
}
<div class="container-fluid">
  <div class="wrapper">
    <div class="sidebar">
      <h2>Paperpay</h2>
      <ul>
        <li><a href="#"><i class="fas fa-file-invoice"></i>Statements</a></li>
        <li><a href="#"><i class="fas fa-users"></i>Profile</a></li>
        <li><a href="#"><i class="far fa-newspaper"></i>Newspapers</a></li>
      </ul>
    </div>
    <div class="main_content">
      <div class="header">Welcome to Paper Pay</div>
      <div class="info">
        welcom to info
      </div>
    </div>
  </div>
</div>

以及何时使用位置 ** 对 css 的新功能帮助我实现我的目标 对 css 来说是新的 UI 帮助我达到我的目标，即 UI **

标签： htmlcss

解决方案

您参考display: flex但似乎并未实际使用它。

display: flex如果您不使用它并给 main_content 一个大于或等于侧边栏宽度的左边距，那么一个快速的肮脏解决方案就是摆脱它。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

.container-fluid .wrapper {
    position: relative;
}

.container-fluid .wrapper .sidebar {
  position: fixed;
  width: 200px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0;
}

.main_content{
margin-left:200px;
}
<div class="container-fluid">
  <div class="wrapper">
    <div class="sidebar">
      <h2>Paperpay</h2>
      <ul>
        <li><a href="#"><i class="fas fa-file-invoice"></i>Statements</a></li>
        <li><a href="#"><i class="fas fa-users"></i>Profile</a></li>
        <li><a href="#"><i class="far fa-newspaper"></i>Newspapers</a></li>
      </ul>
    </div>
    <div class="main_content">
      <div class="header">Welcome to Paper Pay</div>
      <div class="info">
        welcom to info
      </div>
    </div>
  </div>
</div>

推荐阅读