day06

1.相对定位

  /* 相对定位就是元素在页面上正常的位置 */
        div{
            width:100px;
            height:100px;
            background: red;
            position: relative;
            left:200px;
            top:200px;
            /* 相对定位一般不使用right,bottom */
            /* right:0px; */
            /* bottom:10px; */
        }

相对定位一般不使用right，bottom

2.绝对定位

 .parent{
            width:200px;
            height:200px;
            background-color:red;
            position: relative;
        }
        /* 绝对定位的元素移动的位置,是离它最近的给了定位的父元素 */
        /* left,right,top,bottom */
        .child{
            width:50px;height:50px;background:green;
            position:absolute;
            right:0;
            bottom:0;
        }

绝对定位的元素移动的位置,是离它最近的给了定位的父元素

3.元素水平垂直居中

 .parent{
            position: relative;
            width:300px;
            height:300px;
            background:red;
        }
        .child{
            position:absolute;
            width:50px;
            height:50px;
            background:green;
            left:50%;
            top:50%;
            margin-left:-25px;
            margin-top: -25px;
        }

4.banner

 html,body{
            width:100%;
            height:100%;
        }
        /* 子元素left,top值给百分比,是相对于父元素的width,height而言的 */
        img{
            position:absolute;
            left:50%;
            top:50%;
            width:618px;
            height:128px;
            margin-left:-307px;
            margin-top: -64px;
        }
        body{
            position: relative;
            background:url("images/bg.png") no-repeat center center;
            background-size: cover;

子元素left,top值给百分比,是相对于父元素的width,height而言的

5.search

.search{
            margin:100px;width:240px;
            height:40px;position: relative;
        }
        button{
            position:absolute;top:50%;margin-top: -11px;

            right:5px;width:23px;height:22px;
            background: url("images/icon4.png");border:none;
        }
        input{
            padding-left:20px;border:none;
            border-radius: 30px;outline: none;
            width:220px;height:40px;background:#eee;
        }

6.百度一下

 .search{
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            width:640px;
            height:38px;
            position: relative;
        }
        input{
            border:1px solid #b8b8b8;
            width:540px;
            height:36px;
            position:absolute;
            left:0;
            top:0;
        }
        button{
            color:#fff;
            border:1px solid #3385ff;
            background:#3385ff;
            width:100px;
            height:38px;
            position:absolute;
            right:0;

        }

7.fixed

 div{
            width:20px;
            height:50px;
            background:red;
            position:fixed;
            right:10px;
            bottom:130px;
        }

8.z-index

 /* z-index设置给了absolute定位元素的堆叠顺序 */
        .parent{
            width:300px;height:300px;background: red;
            position: relative;
        }
        .one{
            width:100px;
            height:100px;
            background:green;
            position:absolute;
            z-index:100;
        }
        .two{
            width:200px;
            height:50px;position:absolute;
            background:blue;
            z-index: 101;
        }
        .parent:hover .one{
            z-index: 200;
        }

z-index设置给了absolute定位元素的堆叠顺序