固定定位 z-index iconfont的使用 043

固定定位现象脱标提升层级将盒子固定住

　　参考点浏览器的左上角 :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="./css/reset.css">

    <style>

        body{

            padding-top: 80px;

        }

        .header{

            width: 100%;

            height: 80px;

            background-color: red;

            /*固定定位*/

            position: fixed;

            top: 0;

            left: 0;

        }

    </style>

</head>

<body style="height: 2000px">

    <div class="header"></div>

    <p>I am alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

    <p>alex</p>

</body>

</html>

reset.css(重置样式) 直接引用就行

/* http://meyerweb.com/eric/tools/css/reset/

   v2.0 | 20110126

   License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

回到顶部案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="./css/reset.css">

    <style>

        .backTop{

            width: 100px;

            height: 100px;

            line-height: 100px;

            text-align: center;

            background-color: black;

            position: fixed;

            right: 20px;

            bottom: 20px;

        }

        a{

            text-decoration: none;

        }

        .backTop a{

            color: #fff;

        }

    </style>

</head>

<body style="height: 2000px">

<div id="top"></div>

<div class="backTop">

    <!--阻止a标签的默认事件-->

    <a href="javascript:void(0);">回到顶部</a>

</div>

<!--from xxx import ooo-->

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>

    // def $(str):

    //     .....

    // return 对象

    //

    // $()

    $('a').click(function(){

    //   业务逻辑

        $('body,html').animate({

            scrollTop:0

        },1000);

    })

</script>

</body>

</html>

z-index :有四大特征:

　　与固定定位有关系默认为0 越大表层级越高

　　1 z-index值表示谁压着谁,数值大的压盖数值小的

　　2 只有定位了的元素才能有z-index ,也即不管线对定位绝对定位固定定位都可以使用z-index 浮动元素不能设置z-index

　　3 z-index值没有单位就是一个正整数默认的是0如果都没有z-index值那么谁写在HTML后面谁在上面压着别人定位了的元素永远压着没有定位的元素

　　4 从父现象父亲怂了儿子再牛逼也没有用

父子的z-index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .father1,.father2{

            width: 400px;

            height: 400px;

        }

        /*父亲怂了  儿子再牛逼也没用*/

        .father1{

            background-color: red;

            position: absolute;

            z-index: 10;

        }

        .father2{

            background-color: green;

            position: absolute;

            z-index: 3;

        }

        .child1,.child2{

            width: 200px;

            height: 200px;

        }

        .child1{

            background-color: darkmagenta;

            position: absolute;

            top: 350px;

            left: 450px;

            z-index: 5;

        }

        .child2{

            background-color: #ff6700;

            position: absolute;

            top: 350px;

            left: 420px;

            z-index: 10000;

        }

    </style>

</head>

<body>

    <div class="father1">

        <div class="child1"></div>

    </div>

    <div class="father2">

        <div class="child2"></div>

    </div>

</body>

</html>

iconfont 的使用

iconfont

http://www.iconfont.cn/

IconFont 图标

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。

支持按字体的方式去动态调整图标大小，颜色等等。

但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去

色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用

symbol的引用方式

unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {

  font-family: 'iconfont';

  src: url('iconfont.eot');

  src: url('iconfont.eot?#iefix') format('embedded-opentype'),

  url('iconfont.woff') format('woff'),

  url('iconfont.ttf') format('truetype'),

  url('iconfont.svg#iconfont') format('svg');

}

第二步：定义使用iconfont的样式

.iconfont{

  font-family:"iconfont" !important;

  font-size:16px;font-style:normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

  -moz-osx-font-smoothing: grayscale;

}

第三步：挑选相应图标并获取字体编码，应用于页面

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

固定定位

固定定位的现象

脱标
提升层级
页面内容一多,盒子固定住

参考点

以浏览器的左上角

固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body{
            padding-top: 80px;
        }

        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            /*固定定位*/
            position: fixed;
            top: 0;
            left: 0;
            /*提升层级*/
            z-index: 99999;
        }
        .active{
            position: relative;
        }


    </style>
</head>
<body style="height: 2000px">
    <div class="header"></div>
    <p>我是alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p>alex</p>
    <p class="active">alex</p>

</body>
</html>

回到顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .backTop{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: black;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
        a{
            text-decoration: none;
        }
        .backTop a{

            color: #fff;
        }

    </style>
</head>
<body style="height: 2000px">
<div id="top"></div>
<div class="backTop">
    <!--阻止a标签的默认事件-->
    <a href="javascript:void(0);">回到顶部</a>
</div>
<!--from xxx import ooo-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    // def $(str):
    //     .....
    // return 对象
    //
    // $()

    $('a').click(function(){
    //   业务逻辑

        $('body,html').animate({
            scrollTop:0
        },1000);
      
    })

</script>


</body>
</html>