html如何实现pc端导航栏在顶部手机端导航栏在左侧

发布网友发布时间：2022-04-23 09:42

共1个回答

热心网友时间：2022-04-07 15:50

需要借助z-inde来指定叠放次序，z-index值高，block居于顶部，因此将导航栏的z-index设置为2，侧边栏的z-index设置为1。

先简单说一下原理，我们需要用到css中position:fixed这一属性，在默认状态下，当不指定block的相对居中位置时，它会自动居于浏览器左侧，并且固定在此。因此，我们需要将导航栏的长度拉伸到100%，并且给予一个高度，在我的界面中，其高度为50px(我的网页并不是直接指定，而是通过padding以及字的高度填充，这里进行简化)。同理，对于侧边栏同样可以使用position:fixed这一属性来固定。同时设置一个固定长度350px，其高度设为100%。由于设置这一属性会破坏页面的流式结构，两个block会出现重叠的现象。因此，需要借助z-inde来指定叠放次序，z-index值高，block居于顶部，因此将导航栏的z-index设置为2，侧边栏的z-index设置为1。所以此时，内容模块必须相对于浏览器的左侧与顶部做一定的空位，否则会被挡住。

综上，CSS可以写成下面这样。