今天学到了什么
1.定位
1.1相对定位
相对定位就是元素在页面上正常的位置
div{
width: 100px;
height: 100px;
background: red;
position: relative;
left: 200px;
top: 200px;
}
提示：相对定位一般不使用right，bottom
相对定位.png
2.2 绝对定位
绝对定位的元素移动的位置，是离它最近的给了定位的父元素
.parent{
width: 200px;
height:200px;
background-color: red;
position: relative;
}
.child{
width: 50px;
height: 50px;
background: green;
position: absolute;
left: 100px;
}
绝对定位.png
2. 元素垂直水平居中
设置元素垂直水平居中时 top：50%，left：50% 则margin-top：-height/2，margin-left：-width/2
子元素left，top值给百分比，是相对于父元素的width，height而言的
.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;
}
元素垂直水平居中.png
3. 搜索框
*{margin: 0;padding: 0;}
.search{
margin: 100px;
width: 240px;
height: 40px;
position: relative;
}
button{
position: absolute;
top: 50%;
margin-top: -11px;
right: 5px;
width:23px;
height: 22px;
border: none;
background: url("images/icon4.png");
}
input{
padding-left: 20px;
border: none;
border-radius: 30px; /* 使搜索框变为弧形 */
outline: none; /* 去掉轮廓 */
width: 220px;
height: 40px;
background: #eee;
}
<div class="search">
<input type="text" placeholder="搜索">
<button></button>
</div>
搜索框.png
4. 固定定位
div{
width: 20px;
height: 50px;
background: red;
position: fixed;
right: 10px;
bottom: 130px;
}
固定定位.png
5. z-index堆叠顺序
谁的z-index大谁就在最上面
.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;
}
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
堆叠顺序（鼠标未移动到div上）.png
当鼠标移动到div上时，one在最上面
.parent:hover .one{
z-index: 200;
}
堆叠顺序（鼠标移动到div上）.png
今天还有什么不会
