今天學(xué)到了什么侣颂？
一固阁、Position 位置
1.相對定位
2.絕對定位
3.應(yīng)用例子
4.fixed
1.相對定位
div{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 100px;
top: 200px;
}
1.相對定位就是元素在上面
2.相對定位一般不使用right,bottom
相對定位.png
2.絕對定位
絕對定位的元素移動(dòng)的位置,是離它最近的給了定位的父元素 left,right,top,bottom
<style>
.parent{
width:200px;
height: 200px;
background-color: red;
position: relative;
}
/* 絕對定位的元素移動(dòng)的位置,是離它最近的給了定位的父元素 */
/* 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.應(yīng)用例子
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;
}
在頁面中被定位，不會(huì)隨著頁面滑動(dòng)而改變
5. z-index
z-index設(shè)置給了absolute定位的堆疊順序
<style>
/* z-index設(shè)置給了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
