css-position:fixed

头部和侧边栏固定，内容区域滚动，怎么实现？

---

一、固定定位是什么？

给元素设置了position：fixed，则开启了元素的固定定位:

固定定位也是有一种绝对定位，它的大部分特点和绝对定位一样

不同的是：

1)固定定位永远都会相对于浏览器窗口进行定位
2)固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动

二、头部和侧边栏固定，内容可滚动

1.示例图片

navbar、sidebar、content这三个部分相对浏览器固定。
navbar距离左右为0（使其占整宽）。
sidebar距离下为0、距离上为navbar的高度（使其占除了navbar外的浏览器整高）。
content向右浮动，距离下 右为0、距离上为navbar的高度，设置overflow:scroll 。

## **2.css样式**

<font color=#999AAA >代码如下（示例）：



 <style>
        .navbar {
            margin-bottom: 0;
            position: fixed;<font color=red>
            left: 0;
            right: 0;
        }

        .sidebar {
            background: lightgray;
            padding: 0;
            position: fixed;<font color=red>
            top: 52px;
            bottom: 0;
        }

        .content {
            position: fixed;<font color=red>
            top: 52px;
            right: 0;
            bottom: 0;
            overflow: scroll;<font color=red>
        }
    </style>



<font color=purple >

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 总结
<font color=black >提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了一般情况下，页面头部和侧边栏固定的一种情况，我们要根据不同情况去调整元素的定位方式。


<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">