一.定位

1.1相对定位

    div{
            width:100px;
            height:100px;
            background: red;
            position:relative;
            left:200px;
            top:200px;

其相对定位是指元素在页面上正常的位置
相对定位一般不使用right bottom
right：0px
bottom：10px

1.2,。绝对定位

      .parent{
            width:200px;
            height: 200px;
            background-color: red;
            position:relative;
        }   
       .child{
            width:50px;
            height: 50px;
            background: green;
            position: absolute;
            right: 0;
            bottom: 0px;

        }
    ~~~
  绝对定位的元素移动的位置，是离它最近的给了定位的父元素
          left right top bottom

#二.元素居中

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

元素的垂直水平居中可通过相对绝对定位实现，实现绝对定位的元素在相对定位的父元素上移动
通过调节left right的值可实现垂直水平居中

1.3.元素水平居中

     *{margin:0;padding:0}
        html,body{
            width:100%;
            height:100%;
        }
        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而言

三.搜索栏的制作

1.1

    *{margin:0;padding:0}
        button{
            width:23px;
            height:22px;
            background: url("images/icon4.png");
            border:none;
            position: absolute;
            top:50%;
            margin-top: -11px;
            right: 5px;
        }
        .search{
            margin:100px;
            width:240px;
            height:40px;
            position:relative;
        }
        input{
            padding-left:20px;
            border:none;
            border-radius: 30px;
            outline:none;
            width:220px;
            height: 40px;
            background: #eee;

        }
    
    </style>
</head>
<body>
    <div class="search">
        <input type="text">
        <button></button>
    </div>

可通过相对绝对定位实现按钮和输入框之间的位置变化

1.2.百度搜素栏

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

        }
        input{
            width:540px;
            height: 36px;
            position: absolute;
            border:1px solid #b8b8b8;
       }