今天学到了什么？
一、定位
1.相对定位（父元素）
<style>
/*相对定位就是元素在页面上正常的位置*/
div{
width: 100px;
height: 100px;
background: red;
position: relative;
left: 200px;
top: 200px;
/*相对定位一般不使用right，bottom*/
/*right:0px;*/
/*bottom:10px;*/
}
</style>
<body>
<div>
</div>
</body>
2.绝对定位（子元素）
<style>
.parent{
width: 200px;
height: 200px;
background: red;
position: relative;
}
/*绝对定位的元素移动的位置，是离它最近的给了定位的父元素*/
/*left,right,top,bottom*/
.child{
width: 50px;height: 50px;
background: green;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<body>
<div class="parent">
<div class="child"><div>
</div>
</body>
3.固定定位
<style>
div{
width: 20px;
height: 50px;
background: red;
position: fixed;
right: 10px;
bottom: 130px;
}
</style>
<body>
<div>
</div>
</body>
01.png
固定定位效果图
二、元素垂直水平居中
1.垂直水平居中
<style>
*{
margin: 0;padding: 0;
}
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child{
width: 50px;
height: 50px;
position: absolute;
background: green;
left: 50%;
top: 50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
02.png
2.手机例题
<style>
*{margin:0;padding: 0}
html,body{
width: 100%;
height: 100%;
}
/*子元素left，top值给百分比，是相对于父元素的width，height而言的*/
img{
width: 618px;
height: 128px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -309px;
margin-top: -64px;
}
body{
position: relative;
background: url("image/bg.png") no-repeat center center;
background-size: cover;
}
</style>
<body>
<img src="image/phone - 副本.png" alt="" >
</body>
03.png
3.z-index
z-index设置给了absolute定位元素的堆叠顺序
<style>
.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;
}
</style>
<div class="parent">
<div class="one"></div>
<div class="two"></div>
</div>
三、导航栏
1.简书
<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("image/icon4.png");
border: none;
}
input{
padding-left: 20px;
border: none;
border-radius: 30px;outline: none;
width: 220px;height: 40px;background:#eee;
}
</style>
<div class="search">
<input type="text" placeholder="搜索">
<button></button>
</div>
04.png
2.百度
<style>
*{margin: 0;padding: 0}
.search{
width: 640px;
height: 36px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 300px;
}
input{
width: 640px;
height: 36px;
position: absolute;
left: 0;
top: 0;
border: 1px solid #8b8b8b;
}
button{
width: 100px;
height: 38px;
position: absolute;
background:#3385ff;
right:-1px;
border: 1px solid #3385ff;
color: #fff;
}
body{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
margin-top: -140px;
margin-left: -155px;
}
.child2{
position: absolute;
left: 50%;
top: 50%;
margin-left:180px ;
margin-top:-15px ;
}
</style>
<body>
<img src="image/百度一下01.png" alt="" class="child">
<div class="search">
<input type="text">
<button>百度一下</button>
<img src="image/百度一下.png" alt="" class="child2">
</div>
</body>
05.png
网友评论