1.定位
<style>
div{
width:100px;
height: 100px;
background: rosybrown;
position: relative;
left: 200px;
top:200px;
/*相对定位一般不使用right,bottom*/
/*right:0px;*/
/*bottom:0px;*/
}
</style>
<body>
<!--定位-->
<!--
相对定位
绝对定位
-->
<div>
</div>
</body>
2.绝对定位
<style>
.parent{
width:200px;
height: 200px;
background-color: aquamarine;
position: relative;
}
/*绝对定位的元素移动的位置，是离它最经的给了定位的父元素*/
/*left,rigth,top,bottom*/
.child{
width:50px;
height: 50px;
background: green;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
3.元素垂直水平居中
<style>
*{margin:0;padding:0}
.parent{
position: relative;
width:300px;
height:300px;
background:rosybrown;
}
.child{
position:absolute;
width:50px;
height: 50px;
background: green;
left: 50%;
top: 50%;
margin-left:-25px;
margin-top:-25px;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
4.banner
<style>
*{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-right: -64px;
}
body{
position:relative;
background:url("images/bg.png") no-repeat center center;
background-size: cover;
}
</style>
<body>
<img src="images/phone.png" alt="">
</body>
5.search
<style>
*{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;
background: url("images/icon4.png");
border:none;
}
input{
padding-left: 20px;
border: none;
border-radius: 30px;
outline: none;
width: 220px;
height: 40px;
background: #eee;
}
</style>
<body>
<div class="search">
<input type="text" placeholder="搜索">
<button></button>
</div>
</body>
6.练习百度一下
<style>
*{margin:0;padding:0}
.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: white;
border:1px solid #3385ff;
background: #3385ff;
width:23px;
height: 22px;
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="search">
<input type="text" placeholder="">
<button>百度一下</button>
</div>
</body>
7.fixed
<style>
div{
width:20px;
height: 50px;
background: red;
position:fixed;
right: 10px;
bottom:130px;
}
</style>
<body>
<div>
</div>
</body>
8.z-index
<style>
/*z-index设置给了absolute定位元素的堆叠顺序*/
.parent{
width:300px;
height: 300px;
background: red;
position: relative;
}
.one{
width:100px;
height: 100px;
background:greenyellow;
position:absolute;
z-index: 100;
}
.two{
width:200px;
height: 50px;
position:absolute;
background: blueviolet;
z-index: 101;
}
.parent:hover .one{
z-index: 200;
}
</style>
<body>
<!--z-index-->
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
网友评论