css位置-隐藏在左侧菜单后面的内容

Question

我的网页内容位于左侧的侧菜单后面。我希望菜单是固定的，但每当我这样做时，内容就会隐藏在菜单后面的左侧。任何帮助都将不胜感激。（对格式化表示歉意，网站新手。）

.菜单｛

padding-top: 150px;


height: 100%;


width: 170px;


background-color: white;


float: left;


display: table;


position: fixed;

}

Answer 1

固定元素不再在页面流中，它们的作用与绝对定位元素相同。Chris Coyier对定位的差异有一个很好的解释http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

为了使正文内容停止在固定属性后面流动，您需要创建一个容器（如果还不存在），所有正文内容都驻留在该容器中，当然导航/菜单栏除外。然后，对主体内容应用左侧填充，使其与固定元素的宽度相等，从而使主体内容始终远离浏览器左侧。

固定元素不会影响元素的流动和定位以及位置：父容器上的相对元素不会影响固定元素。