阿ken的HTML、CSS的入门指南（十）_浮动与定位感激相遇 你好 我是阿ken 浮动布局虽然灵活，但是却无法对元素的
感激相遇 你好 我是阿ken
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
🌊🌈关于内容：
6.3_元素的定位
浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在 CSS 中，通过定位属性可以实现网页中元素的精确定位。下面，我们将对元素的定位属性及常用的几种定位方式进行详细讲解。
6.3.1_元素的定位属性
制作网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行精确定位。元素的定位就是将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。
1. 定位模式
_ 在 CSS 中，position 属性用于定义元素的定位模式，其基本语法格式如下。
选择器 {
position: 属性值;
}
position 属性的常用值：
| 值 | 描述 |
|---|---|
| static | 静态定位(默认定位方式) |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
从上表可以看出，定位的方法有多种，分别为静态定位 (static)、相对定位 (relative)、绝对定位 (absolute) 及固定定位 (fixed)，后面我们将对它们进行详细讲解。
2. 边偏移
_ 定位模式 ( position ) 仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在 CSS 中，通过边偏移属性 top、bottom、left 或 right 来精确定义定位元素的位置。
边偏移设置方式：
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
从上表可以看出，边偏移可以通过 top、bottom、left、 right 进行设置，其取值为不同单位的数值或百分比，示例如下。
position: relative; /*相对定位*/
left: 50px; /*距左边线50px*/
top: 10px; /*距顶部边线10px*/
6.3.2_静态定位 static
静态定位是元素的默认定位方式，当 position 属性的取值为 static 时，可以将元素定位于静态位置。所谓静态位置就是各个元素在 HTML 文档流中默认的位置。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义 position 属性时， 并不说明该元素没有自己的位置， 它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性 ( top、bottom、left 或 right ) 来改变元素的位置。
6.3.3_相对定位 relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当 position 属性的取值为 relative 时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
案例：演示对元素设置相对定位的方法和效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的定位</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
font-size: 18px;
font-weight: bold;
}
.father {
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid #000;
}
.child01, .child02, .child03 {
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid #000;
margin: 10px 0px;
text-align: center;
}
.child02 {
position: relative; /*相对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距顶部边线100px*/
}
</style>
</head>
<body>
<div class="father">
<div class="child01">child-01</div>
<div class="child02">child-02</div>
<div class="child03">child-03</div>
</body>
</html>
上述第 25 ~ 29 代码对 child02 设置相对定位模式，并通过边偏移属性 left 和 top 改变它的位置。
运行后不难看出，对 child02 设置相对定位后，它会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。
6.3.4_绝对定位 absolute
绝对定位是将元素依据最近的已经定位 ( 绝对、固定或相对定位 ) 的父元素进行定位，若所有父元素都没有定位，则依据 body 根元素 ( 浏览器窗口 ) 进行定位。当 position 属性的取值为 absolute 时，可以将元素的定位模式设置为绝对定位。
将 child02 的定位模式设置为绝对定位，即将第 25 ~ 29 行代码更改如下：
.child02 {
position: absolute; /*绝对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距项部边线100px*/
}
上述代码中，设置为绝对定位的元素 child02 ，依据浏览器窗口进行定位。并且，这时 child03 占据了 child02 的位置，即 child02 脱离了标准文档流的控制，不再占据标准文档流中的空间。
在上面的案例中，对 child02 设置了绝对定位，当浏览器窗口放大或缩小时，child02 相对于其直接父元素的位置都将发生变化。当缩小浏览器窗口时，很明显 child02 相对于其直接父元素的位置发生了变化。
然而在网页中，一般需要子元素相对于其直接父元素的位置保持不变，即子元素依据其直接父元素绝对定位，如果直接父元素不需要定位，该怎么办呢?
对于上述情况，可将直接父元素设置为相对定位，但不对其设置偏移量，然后再对子元素应用绝对定位，并通过偏移属性对其进行精确定位。这样父元素既不会失去其空间，同时还能保证子元素依据直接父元素准确定位。
案例：演示子元素依据其直接父元素准确定位的方法，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子元素相对于直接父元素定位</title>
<style type="text/css">
.father {
margin: 10px auto;
width: 300px;
height: 300px;
padding: 10px;
background: #ccc;
border: 1px solid #000;
position: relative;
/*相对定位，但不设置偏移量。*/
}
.child01, .child02, .child03 {
width: 100px;
height: 50px;
line-height: 50px;
background: #ff0;
border: 1px solid #000;
margin: 10px 0px;
text-align: center;
}
.child02 {
position: absolute; /*绝对定位*/
left: 150px; /*距左边线150px*/
top: 100px; /*距顶部边线100px*/
}
</style>
</head>
<body>
<div class="father">
<div class="child01">child-01</div>
<div class="child02">child-02</div>
<div class="child03">child-03</div>
</div>
</body>
</html>
在上述代码中，代码用于对父元素设置相对定位，但不对其设置偏移量。同时，代码用于对子元素 child02 设置绝对定位，并通过偏移属性对其进行精确定位。
运行后，子元素相对于父元素进行偏移。这时，无论如何缩放浏览器的窗口，子元素相对于其直接父元素的位置都将保持不变。
- 注意: _ (1) 如果仅设置绝对定位，不设置边偏移， 则元素的位置不变， 但其不再占用标准文档中的空间，与上移的后续元素重叠。 _ (2) 定义多个边偏移属性时，如果 left 和 right 冲突， 以 left 为准，top 和 bottom 冲突，以 top 为准。
6.3.5_固定定位 fixed
固定定位是绝对定位的一种特殊形式， 它以浏览器窗口作为参照物来定义网页元素。当 position 属性的取值为 fixed 时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。但是，由于 IE6 不支持固定定位，因此，在实际工作中较少使用，我们在这里暂不做详细介绍。
6.3.6_z-index 层叠等级属性
当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在 CSS 中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用 z-index 层叠等级属性，其取值可为正整数、负整数和0。z-index 的默认属性值是 0 ，取值越大，定位元素在层叠元素中越居上。
- 注意: _ z-index 属性仅对定位元素生效。
？？？
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「评论」 谢谢支持❤
转载自:https://juejin.cn/post/6993487356665790495