本文是HTML及CSS课程的第九课。定位，既是将元素放置于界面的什么位置。本文主要介绍使用 position
文章目录
- 一、定位的概念
-
- 1、定位是什么
- 2、定位怎么实现
- 二、常见定位方式
-
- 1、相对定位
- 2、绝对定位
- 3、固定定位
- 4、粘性定位
- 三、关于定位的其他几点问题
-
- 1、浮动元素定位
- 2、行级元素定位
- 3、设置元素的堆叠顺序
一、定位的概念
1、定位是什么
定位，既是将元素放置于界面的什么位置。定位的基本思想很简单，它允许我们定义元素相对于其正常位置，或者相对于最近的已定位父元素，甚至浏览器窗口的位置。
2、定位怎么实现
在CSS中，我们通过
position
属性实现元素的定位。
position
属性及值的说明如下：
| 属性及值 | 说明 |
|---|---|
| 元素相对于其正常位置进行定位 |
| 元素相对于最近的已定位父元素进行定位 |
| 元素相对于浏览器窗口定位 |
| 默认值。元素不浮动，按正常文档流显示 |
| 默认值，即没有定位，元素遵循正常的文档流 |
说明：
-
static
position
position
static
二、常见定位方式
1、相对定位
当元素的样式属性
position
值为
relative
时，表明该元素会进行相对定位。元素会相对于文档流中的原来位置进行偏移。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 相对定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-relative {height: 50px; width: 200px; border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-relative">相对定位的div</div>
<div class="d-normal">正常的div</div>
</body>
</html>
页面浏览效果：
说明：
- 相对定位的元素仍然会占据自己在正常的文档流中的位置。周围其他元素位置并不受影响。
- 相对定位的元素，偏移量由
top
left
bottom
right
top: 5px;
left: 20px;
-
top
bottom
bottom
left
right
right
- 如果你想让一个元素变成定位元素，并且不改变它在文档流中的位置，那么，设置它的
position
relative
2、绝对定位
当元素的样式属性
position
值为
absolute
时，表明该元素会进行绝对定位。元素会脱离原来的文档流，相对于最近的已定位父元素进行偏移。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 绝对定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d-parent {height: 250px; width: 250px; border: 10px solid lightgreen; position: relative;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-absolute {height: 50px; width: 200px; border: 10px solid lightgreen; position: absolute; bottom: 5px; right: 5px;}
</style>
</head>
<body>
<div class="d-parent">
<div class="d-normal">正常的div</div>
<div class="d-absolute">绝对定位的div</div>
<div class="d-normal">正常的div</div>
</div>
</body>
</html>
页面浏览效果：
说明：
- 绝对定位的元素将脱离原来的文档流。周围其他元素会忽略绝对定位元素。
- 绝对定位的元素，偏移量仍然由
top
left
bottom
right
bottom: 5px;
right: 5px;
- 绝对定位元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于最初的包含块（可能是画布或
<html>
3、固定定位
当元素的样式属性
position
值为
fixed
时，表明该元素会进行固定定位。元素也会脱离原来的文档流，相对于浏览器窗口定位，看起来就像元素固定在浏览器的窗口上，不论如何滚动页面，它都不会移动。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 固定定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
body {height: 1000px;}
.d-normal {height: 100px; width: 100px; border: 10px dotted lightsalmon;}
.d-fixed {height: 120px; width: 120px; border: 10px solid lightgreen; position: fixed; top: 50px; left: 50px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-fixed">固定定位的div</div>
</body>
</html>
页面浏览效果：
说明：
- 固定定位的元素也会脱离原来的文档流。周围其他元素会忽略固定定位元素。
- 固定定位的元素，偏移量仍然由
top
left
bottom
right
top: 50px;
left: 50px;
- 无论用户如何拖曳浏览器上的滚动条，固定定位的元素都不会跟着移动。
4、粘性定位
当元素的样式属性
position
值为
sticky
时，表明该元素会进行粘性定位。粘性定位的元素是依赖于用户的滚动，在
position:relative
与
position:fixed
定位之间切换。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 粘性定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
body {height: 1000px;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.d-sticky {height: 50px; width: 200px; border: 10px solid lightgreen; position: sticky; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<div class="d-sticky">粘性定位的div</div>
<div class="d-normal">正常的div</div>
</body>
</html>
页面浏览效果：
说明：
- 当浏览器窗口中包含目标区域时，粘性定位元素的行为和相对定位
position:relative
position:fixed
- 粘性定位的元素，偏移量仍然由
top
left
bottom
right
top: 5px;
left: 20px;
三、关于定位的其他几点问题
1、浮动元素定位
这里演示当一个元素已经设置浮动后，再设置定位属性会有什么效果。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 给浮动元素设置定位 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d1, .d2, .d3 {height: 120px; width: 120px; border: 10px dotted lightsalmon; float: left;}
.d-position {position: relative; top: 20px; left: 20px;}
</style>
</head>
<body>
<div class="d1">向左浮动</div>
<div class="d2 d-position">向左浮动，同时定位</div>
<div class="d3">向左浮动</div>
</body>
</html>
页面浏览效果：
说明：
- 当一个元素为浮动元素，同时设置定位属性时，元素仍然遵守相应的定位规则，相对于其浮动位置，或者最近的已定位父元素，或者浏览器窗口的位置进行定位。
2、行级元素定位
这里演示给行标签设置定位属性的效果。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 行级元素定位 </title>
<style>
body {height: 1000px;}
* {margin: 0; border: 0; padding: 0;}
.d-normal {height: 50px; width: 200px; border: 10px dotted lightsalmon;}
.span-relative {border: 10px solid lightgreen; position: relative; top: 5px; left: 20px;}
</style>
</head>
<body>
<div class="d-normal">正常的div</div>
<span class="span-relative">相对定位的span</span>
<div class="d-normal">正常的div</div>
</body>
</html>
页面浏览效果：
说明：
- 给行级标签设置定位属性，元素仍然遵守相应的定位规则。行级元素定位后并不会变成块级元素。
3、设置元素的堆叠顺序
元素经过定位后，有可能显示在浏览器窗口中时出现位置重叠的现象，默认情况下，在HTML文件中后出现的元素将会覆盖前面的元素。我们可以通过CSS中的
z-index
属性调整元素的堆叠顺序。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 调整元素的堆叠顺序 </title>
<style>
* {margin: 0; border: 0; padding: 0;}
.d1, .d2 {width: 100px; height: 100px; position: relative;}
.d1 {background-color: lightgreen; z-index: 1;}
.d2 {background-color: lightsalmon; top: -50px; left: 50px;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
</html>
页面浏览效果：
说明：
- 样式属性
z-index
- 样式属性
z-index