position（导航栏固定）

定义

POSITION是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。

position的属性值共有四个常用的：static、relative、absolute、fixed。 还有三个不常用的：inherit、initial、sticky

position: relative;相对定位

1> 不影响元素本身特性（无论区块元素还是内联元素会保留其原本特性）

2> 不会使元素脱离文档流（元素原本位置会被保留，即改变位置也不会占用新位置）

3> 没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移）

4>提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位）

position: absolute;绝对定位

1> 使元素完全脱离文档流（在文档流中不再占位）

2> 使内联元素在设置宽高的时候支持宽高（改变内联元素的特性）

3> 使区块元素在未设置宽度时由内容撑开宽度（改变区块元素的特性）

4> 相对于最近一个有定位的父元素偏移（若其父元素没有定位则逐层上找，直到document——页面文档对象）

5> 相对定位一般配合绝对定位使用（将父元素设置相对定位，使其相对于父元素偏移）

6> 提升层级（同相对定位）

position: fixed;固定定位

fixed生成固定定位的元素，相对于浏览器窗口进行定位。

1.会改变行内元素的呈现模式，使display之变更为block。

2.会让元素脱离文档流，不占据空间。

3.默认会覆盖到非定位元素上。 fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

position:static：默认值

默认布局。元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

position: sticky 粘性定位

粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix 。

position: inherit

规定应该从父元素继承 position 属性的值。

posiyion: initial

设置该属性为默认值，详情查看CSS initial 关键字

initial 关键字用于设置 CSS 属性为它的默认值。

initial 关键字可用于任何 HTML 元素上的任何 CSS 属性

实例（导航栏固定）

利用position： fixed；属性将导航栏盒子固定在页面上方，当页面其它内容滑动时，导航栏固定存在。

由于position：fixed；属性不占页面内容，下方其余盒子依次向上移动，在导航栏外部加一个同等大小盒子，利用position：relative；将其他盒子归于文档流。

<div id="header"> <div id="nav">
    <div id="navR"> <a href="index.html"><img src="" alt=""></a></div>
<div id="navM">
    <ul>
        <li><a href="index.html">
            <span>首页</span><br>
            <p>Home</p>
        </a></li>
        <li><a href="About.html">
            <span>关于我们</span><br>
            <p>About</p>
        </a></li>
        <li id="productXiala"><a href="">
            <span>产品中心</span><br>
            <p>Product</p>
        </a></li>
        <li ><a href="News.html">
            <span>新闻动态</span><br>
            <p>News</p>
        </a></li>
        <li><a href="Education.html">
            <span>教育案例</span><br>
            <p>Education</p>
        </a></li>
        <li><a href="Application.html">
            <span>行业应用</span><br>
            <p>Application</p>
        </a></li>
        <li><a href="https://shop292973q3v1w35.1688.com/?spm=a2615.7691456.autotrace-topNav.1.221f4411cfiVuL">
            <span>官方商城</span><br>
            <p>Mall</p>
        </a></li>
        <li><a href="Contact.html">
            <span>联系我们</span><br>
            <p>Contact</p>
        </a></li>
    </ul>
</div>
    <div id="navL"><a href="https://shop292973q3v1w35.1688.com/?spm=a2615.7691456.autotrace-topNav.1.221f4411cfiVuL">
        <span >3D打印全套解决方案</span><br>
        <span >电话：13910779193</span>
    </a></div>
   </div>
</div>
​

#header{
    width:100%;
    height: 103px;
    background: #ffffff;
    position: relative;
    top: 0;
    margin: 0;
    padding: 0;
}
#header>#nav{
    width:100%;
    height: 103px;
    background:#ffffff;
    position: fixed;
    margin: 0 auto;
    display: flex;
    float: left;
    z-index: 2;
​
}
#header>#nav>#navR{
    width: 156px;
    height: 53px;
    float: left;
    /*background: #00b38a;*/
    background-image: url("https://24877273.s21i.faiusr.com/2/ABUIABACGAAghofKhwYo4OG2lQMw9AM4qgE.jpg ") ;
    background-size: 156px 53px;
    background-position: center;
    position: absolute;
    left: 78px;
    top: 33px;
}
#header>#nav>#navM{
    width: 1020px;
    height: 64px;
    background: transparent;
    position: absolute;
    top: 33px;
    left: 234px;
​
}
#header>#nav>#navM ul{
    width: 980px;
    height: 64px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin:  0 auto;
    padding: 0;
    text-align: center;
    align-items: center;
}
#header>#nav>#navM li{
    width: 110px;
    height: 100%;
    border: 0 solid transparent;
}
#header>#nav>#navM li:hover{
    border-bottom: 2px solid #00b38a;
}
#header>#nav>#navM a{
    text-decoration: none;
    color: #353535;
    font-family: '微软雅黑';
}
#header>#nav>#navM>ul>span{
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#header>#nav>#navM>ul>p{
    font-size: 14px;
    margin: 0;
    padding: 0;
}
#header>#nav>#navM .active span{
    color: #c40000;
}
#header>#nav>#navM .active p{
    color: rgb(66,165,246);
}
#header>#nav>#navM li:hover span {
    color: #c40000;
}
​
#header>#nav>#navM li:hover p {
    color: rgba(66, 165, 246, 1);
}
#header>#nav>#navL{
    width: 200px;
    height: 50px;
    background: transparent;
    position: absolute;
    top: 33px;
    left: 1300px;
}
#header>#nav>#navL a{
    text-decoration: none;
    font-size: 20px;
    color: #353535;
    font-family: 楷体;
}

 

拓展知识

z-index属性：

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。 Note：使用static 定位或无position定位的元素z-index属性是无效的。

什么是文档流？

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。