今天学到了什么？
一、Position 位置
1.相对定位
2.绝对定位
3.应用例子
4.fixed
1.相对定位
div{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
top: 200px;
}
1.相对定位就是元素在上面
2.相对定位一般不使用right,bottom
相对定位.png
2.绝对定位
绝对定位的元素移动的位置,是离它最近的给了定位的父元素 left,right,top,bottom
<style>
.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: 10px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
绝对定位.png
3.元素水平居中
.parent{
width: 300px;
height: 300px;
position: relative;
background: red;
}
.child{
position: absolute;
width: 50px;
height: 50px;
background: green;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
元素水平居中.png
3.应用例子
3.1
<style>
*{margin: 0;padding: o}
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;
}
</style>
</head>
<body>
<img src="images/phone.png" alt="">
</body>
banner.png
3.2 搜索框（
search）
<style>
*{margin: 0;padding: 0}
.search{
margin: 100px;
height: 40px;
width: 240px;
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;
background: #eee;
width: 228px;
height: 40px;
border-radius: 30px;
outline: none;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="搜素">
<button></button>
</div>
</body>
搜索框.png
3.3 百度一下
<style>
.search{
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 215px;
width:640px;
height:36px;
border: 1px solid gray;
}
input{
position: absolute;
width: 640px;
height: 36px;
border: 0 solid #eee;
}
button{
position: absolute;
right: 0;
color:#eee;
height: 38px;
width: 100px;
background: #3385ff;
border: 1px solid #3385ff;
}
</style>
<body>
<div class="search">
<input type="text">
<button>百度一下</button>
</div>
4. fixed
div{
width: 20px;
height: 50px;
background: red;
position: fixed;
right: 10px;
bottom: 130px;
}
在页面中被定位，不会随着页面滑动而改变
5. z-index
z-index设置给了absolute定位的堆叠顺序
<style>
/* 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;
background: blue;
position: absolute;
z-index: 101;
}
.parent:hover .one{
z-index: 300;
}
</style>
</head>
<body>
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
堆叠.png
