目录
一、定义
通过定位，即文档流、浮动定位、层定位三种定位机制来决定盒子模型的位置，在一个盒子中可同时拥有很多种定位机制。
二、文档流定位
文档流定位即为默认的定位方式，该机制的盒子模型的元素都是从上至下，从左至右依次排列的。
其元素类型分为三种：block类型、inline类型、inline-block类型，且这几种元素可以通过display属性显示，且display属性为none时该元素不会显示。
（一）block类型元素
块状类型元素（block）的特点是占页面一行的空间，表示display:block，使其具有block类型元素的特点，块级元素可以设置 width、height 属性，常用的块状类型元素有：<h>标题标签、<p>段落标签、<div>区域标签、<ol>有序列表标签、<ul>无序列表标签、<table>表格标签、<from>表单标签等等。
例如，下列代码：
css代码：
p {
width: 70px;
height: 70px;
display: block;
background-color: aquamarine;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/new_file.css" />
</head>
<body>
<p>百度搜索</p>
<p>搜狗搜索</p>
<p>CSDN</p>
</body>
</html>
运行结果如下：
（二）inline类型元素
inline类型元素之间默认带有间距，且和其他元素都在一行上，表示display:inline，inline类型元素的width（宽度）和height（高度）不能设置，其宽度就是文字或图片的宽度，常用的inline类型元素有：<a>超链接标签、<span>行内组合标签等等。
例如，下列代码：
css代码：
p {
display: inline;
background-color: aquamarine;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/new_file.css" />
</head>
<body>
<p>百度搜索</p>
<p>搜狗搜索</p>
<p>CSDN</p>
</body>
</html>
运行结果如下：
（三）inline-block类型元素
与inline类型元素一样，该类型元素不单独占据一行，和其他元素都在一行上，但其盒子模型的 width、height 属性都可设置，表示display:inline-block，常用的inline-block类型有：<img>图像标签等等。
例如，下列代码：
css代码：
p {
display: inline-block;
width: 100px;
height: 100px;
background-color: aquamarine;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<p>百度搜索</p>
<p>搜狗搜索</p>
<p>CSDN</p>
</body>
</html>
运行结果如下：
三、浮动定位
浮动定位是通过float属性来设置的，即浮动元素向左向右移动，它可以是左浮动（float:left）、右浮动（float:right）、不浮动（float:none），不浮动即为默认值。浮动定位可用来图文混排、网页分栏等等。
（一）左浮动和右浮动
左浮动和右浮动定位可以用在图片与文字混合排版时，将其左、右浮动，显得更直观。
例如，下列代码：
css代码：
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
img {
width: 100px;
height: 100px;
border: 1px solid black;
float: right;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<img src="image/1-2.png">
<img src="image/1-0.png">
Google uses cookies to deliver its services, to personalise ads and to analyse traffic. You can adjust your privacy
controls at any time in your Google Settings, or learn more.
With Google apps like Gmail, Google Pay and Google Assistant, Chrome can help you stay productive and get more out
of your browser.
Chrome works hard to protect your data and privacy online. With easy-to-use privacy controls, Chrome lets you
customise your settings and browsing experience to how you see fit.
</body>
</html>
运行结果如下：
（二）清除浮动
清除浮动clear属性有三种，分为clear:both（清除两边的浮动）、clear:left（清除左边的浮动）、clear:right（清除右边的浮动）、clear:none，这里none值即为默认值，要注意清除浮动的清除并不是字面意思上的清除该浮动元素。
例如，下列代码，设置清除左浮动“clear:left”：
css代码：
#image1 {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
#image2 {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
clear: left;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
<img id="image1" src="image/1-2.png">
<img id="image2" src="image/1-0.png">
Google uses cookies to deliver its services, to personalise ads and to analyse traffic. You can adjust your privacy
controls at any time in your Google Settings, or learn more.
With Google apps like Gmail, Google Pay and Google Assistant, Chrome can help you stay productive and get more out
of your browser.
Chrome works hard to protect your data and privacy online. With easy-to-use privacy controls, Chrome lets you
customise your settings and browsing experience to how you see fit.
</body>
</html>
运行结果如下：
四、层定位
层定位是通过postion属性来设置的，指定元素的定位，或使其叠加在其它元素上，position 属性有五个值：static、relative、fixed、absolute、sticky。
（一）static定位
静态定位，即为默认值，没有定位，即正常的文档流对象；
例如，下列代码：
css代码：
p {
width: 150px;
height: 70px;
position: static;
border: 2px dotted black;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<p>这是第一个定位</p>
<p>这是第二个定位</p>
<p>这是第三个定位</p>
</body>
</html>
运行结果如下：
（二）fixed定位
固定定位，即该fixed定位是相对浏览器的窗口是固定的，当滑动上下页面时不会随着页面而滑动，可以通过top、bottom、left、right四个属性来设置距浏览器窗口的距离。
例如，下列代码中，先设置区域边距margin: 0和padding: 0，设置box区域层定位为固定定位，且其相对与浏览器窗口距顶部距离为20px、左侧距离为20px：
css代码：
* {
margin: 0;
padding: 0;
}
body {
width: 350px;
height: 300px;
border: 1px solid black;
background-color: cornsilk;
}
#box {
width: 120px;
height: 70px;
position: fixed;
border: 2px dotted black;
top: 20px;
left: 20px;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="box">
<p>这是第一个定位</p>
<p>这是第二个定位</p>
<p>这是第三个定位</p>
</div>
</body>
</html>
运行结果如下：
这里的相对与浏览器窗口距顶部距离top：20px、左侧距离left：20px可以通过坐标系来理解更加清楚，如下：
（三）relative定位
相对定位，relative属性是相对其直接父元素进行定位的，即其元素脱离正常的文档流，但其原位置在文档流依然保留，其它元素不会占据其原来位置。
例如，下列代码，相对父元素就是static默认的静态层定位，其相对两个位置top和left：
css代码：
* {
margin: 0;
padding: 0;
}
body {
width: 700px;
height: 500px;
border: 1px solid black;
background-color: cornsilk;
}
#box1 {
width: 50px;
height: 60px;
background-color: red;
position: relative;
border: 2px dotted black;
top: 20px;
left: 20px;
}
#box2 {
width: 60px;
height: 45px;
background-color: blue;
position: static;
border: 2px dotted black;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="box1">
<p>1</p>
</div>
<div id="box2">
<p>2</p>
</div>
</body>
</html>
运行结果如下：
（四）absolute定位
绝对定位，absolute属性，它相对其于静态定位以外的第一个父元素进行定位，若没有则相对于body定位，它与相对定位有区别，其元素也是脱离正常的文档流，但其原位置在文档流中不再存在，其它元素会占据其原来位置。
例如，下列代码，absolute定位相对body定位，其相对两个位置top和left：
css代码：
* {
margin: 0;
padding: 0;
}
body {
width: 700px;
height: 500px;
border: 1px solid black;
background-color: cornsilk;
}
#box1 {
width: 50px;
height: 60px;
background-color: red;
position: absolute;
border: 2px dotted black;
top: 20px;
left: 20px;
}
#box2 {
width: 60px;
height: 45px;
background-color: blue;
position: static;
border: 2px dotted black;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="box1">
<p>1</p>
</div>
<div id="box2">
<p>2</p>
</div>
</body>
</html>
运行结果如下，可以将其与相对定位比较：
且相对定位元素通常被用来作为绝对定位元素的容器块：
例如，下列代码：
css代码：
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
position: relative;
border: 2px solid pink;
}
#box2 {
width: 80px;
height: 45px;
position: absolute;
bottom: 0;
}
img {
height: 200px;
width: 150px;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<div id="box1">
<img src="image/1-0.png">
<div id="box2">
<p>谷歌浏览器</p>
</div>
</div>
</body>
</html>
运行结果如下：
（五）sticky定位
sticky属性，设置后它会根据用户对页面的滚动而定位在固定的位置，必须指定 top、left、bottom、right 四个值其中一个，该定位才能生效。
例如，下列代码：
css代码：
#sticky {
position: sticky;
top: 0;
padding: 10px;
border: 1px solid green;
background-color: cornsilk;
}
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../CSS/style.css" />
</head>
<body>
<p>当滚动下方页面时，设置的粘性定位不会消失，而是随用户滑动在上方出现。</p>
<div id="sticky">CSS是一门前端开发语言</div>
<div style="padding-bottom:200px">
<p>1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。
其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。
</p>
</body>
</html>
运行结果如下：
当滑动滑动条时，上面定义的内容会一直在上方显示，如下：
（六）z-index重叠
可以通过position的z-index属性可以重叠元素，z-index的值可以为正或负，通过这点可以来指定元素重叠顺序，对于两个元素设置z-index属性，值大的在上面，除了静态定位其它定位都可以设置该属性。
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！