一、static定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 100px;
height: 100px;
background: red;
position: static;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
二、relative定位
相对定位元素的定位是相对其左上顶点的正常位置进行定位,定位后元素还会占据原来的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1,.c2,.c3 {
width: 100px;
height: 100px;
} .c1 {
background: red;
position: relative;
left: 100px;
} .c2 {
background: green;
} .c3 {
background: blue;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
三、absolute定位
定位后,元素脱离文档流,不再占据原来的空间。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html>
1.父元素设置为relative定位,子元素设置absolute定位,相对其父元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 300px;
height: 300px;
background: red;
} .c2 {
width: 200px;
height: 200px;
background: green;
position: relative;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
2.祖先元素设置为relative定位,后代元素设置absolute定位,相对其祖先元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .c1 {
width: 300px;
height: 300px;
background: red;
position: relative;
} .c2 {
width: 200px;
height: 200px;
background: green;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
3.元素没有已定位的祖先元素，它的位置相对于<html>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*这里不清除body的外边距,是为了能够区分html和body元素*/
html,body {
width:100%;
height:100%;
} html {
border: 3px solid yellow;
} body {
border: 3px solid purple;
} .c1 {
width: 300px;
height: 300px;
background: red;
} .c2 {
width: 200px;
height: 200px;
background: green;
} .c3 {
width: 100px;
height: 100px;
background: blue;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">
<div class="c3"></div>
</div>
</div>
</body>
</html>
四、fixed定位
元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.c1 {
width: 100px;
height: 100px;
background: red;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1"></div>
<!--这里用br元素产生滚动条-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>