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定位元素的堆叠顺序
网友评论