一、定位的取值
1.static(静态定位):默认定位
2.相对定位relative:
参考物:定位前的位置
特点:不影响元素本身的特点、元素不脱离文档流、相对于原位置进行偏移
3.绝对定位absolute:
参考物:最近的使用了定位的父级,如果没有找body
特点:元素脱离文档流、行元素支持所有的css样式、块元素内容撑开宽度、清除子级浮动
4.固定定位:
参考物:浏览器窗口
特点:脱离文档流、清除子级浮动
二、作用
1.可以使用偏移描述(top bottom left right)
2.可以使用z-index提升层级
三、练习
利用浮动 画出哆啦A梦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
width: 250px;
height: 250px;
background-color: #fff;
position: relative;
}
.item div {
position: absolute;
}
.head {
width: 250px;
height: 250px;
background-color: deepskyblue;
border-radius: 50%;
}
.eye {
width: 50px;
height: 60px;
background-color: white;
border: 2px solid rgb(78, 75, 75);
border-radius: 32px;
left: 73px;
top: 40px;
z-index: 1;
}
.eye2 {
left: 125px;
}
.yz {
width: 12px;
height: 12px;
background-color: black;
border-radius: 50%;
top: 25px;
left: 5px;
z-index: 1;
}
.eye1 .yz {
left: 33px;
}
.nose {
width: 26px;
height: 26px;
background-color: rgb(143, 25, 25);
border-radius: 50%;
border: 2px solid rgb(23, 23, 23);
top: 94px;
left: 111.5px;
z-index: 1;
}
.face {
width: 160px;
height: 120px;
background-color: white;
border-radius: 50px;
top: 75px;
left: 45.5px;
}
.xian {
height: 45px;
width: 2.5px;
background-color: black;
top: 124px;
left: 125.5px;
}
.circle {
width: 120px;
height: 150px;
background-color: transparent;
border-radius: 60px;
border-bottom: 2.5px solid #111;
top: 18px;
left: 66px;
}
</style>
</head>
<body>
<div class="item">
<div class="head">
<div class="eye eye1">
<div class="yz"></div>
</div>
<div class="eye eye2">
<div class="yz"></div>
</div>
<div class="nose"></div>
<div class="face"></div>
<div class="xian"></div>
<div class="circle"></div>
</div>
</div>
</body>
</html>