一、定位属性position

前面我们已经了解过布局相关的盒模型、浮动等属性，而定位是另一种布局的重要属性，常用于制作压盖或者位置相关的效果。

属性名：position

属性值：relative 相对定位 absolute 绝对定位 fixed 固定定位

作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。

二、偏移量属性

定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。

水平方向：left、right。

垂直方向：top、bottom。

属性值：常用 px 为单位的数值，或者百分比。

三、相对定位

属性值：relative，相对的意思。参考元素：标签加载的原始位置。必须搭配偏移量属性才能发生位置移动。

1.相对定位的性质

相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出原来占有的位置。元素显示效果上，记忆口诀：原位留坑，形影分离。

2.相对定位的注意事项

注意①：偏移量属性的值是区分正负的。正数：表示偏移方向与属性名方向相反。负数：表示偏移方向与属性名方向相同。例如：left:-100px，它是向左进行偏移，所以和单词left左的意思一样。

注意②：同一个方向，不能设置两个偏移量属性，如果水平方向同时设置了 left 和 right 属性，只会加载 left 属性。垂直方向只加载 top 属性。建议：书写时从水平方向和垂直方向各挑一个属性进行组合。

注意③：由于相对定位的参考元素是自身，left 的正值等价于 right 的负值，top 的正值等价于 bottom 的负值。为了方便记忆，可以选择只使用 left、top 组合。

四、定位的实际应用案例

1. 由于相对定位元素比较稳定，不会随意让出位置，可以将相对定位的元素作为后期绝对定位的参考元素，就是所说的子绝父相情况。

2. 相对定位比较稳定，可以在占有原始位置的情况下，对加载效果区域进行位置调整，进行微调设置。或者对文字进行微调。

示例：

<!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>定位的实际应用案例</title><style>body,ul,li,a{margin: 0;padding: 0;}.nav {list-style: none;width: 900px;height: 50px;margin: 50px auto;font: 20px/50px "微软雅黑";background-color: #f00;}.nav li {float: left;width: 150px;height: 50px;}.nav li a {display: block;width: 150px;height: 50px;background-color: skyblue;text-decoration: none;text-align: center;}.nav li a:hover {position: relative;left: 0;top: -3px;border-top: 3px solid #f00;background-color: #0f0;}</style>
</head>
<body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul>
</body>
</html>

五、绝对定位

属性值：absolute，绝对的意思。参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考 <body>。必须搭配偏移量属性才会发生位置移动。

示例1：当我们没有设置偏移属性，它就会自己让出自己的位置，脱离文档流

示例2：当我们设置了偏移属性，没有设置相对定位，它是相对于Body进行偏移的。

示例3：当我们设置了偏移属性，也设置相对定位了，它是相对于设置了相对定位的父元素进行偏移的。

绝对定位的性质

性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。注意2：在绝对定位中，由于参考点不同，left 正值不再等价于 right 的负值。

<body> 为参考元素的参考点

以 <body> 为参考元素时，参考点的确定与偏移量方向有关。第一，如果有 top 参与的定位，参考点就是 <body> 页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。第二，如果有 bottom 参与的绝对定位，参考点是 <body> 页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。实际应用中，如果以 <body> 为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用 <body> 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素，就不会去参考 <body> 。参考元素：参考的是祖先元素中有任意定位的，在 HTML 结构中距离目标最近的祖先。

<!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>祖先级为参考元素</title><style>body,div,p {margin: 0;padding: 0;}.box1 {position: relative;width: 600px;height: 600px;padding: 10px;border: 10px solid #f00;}.box2 {position: absolute;width: 400px;height: 400px;padding: 10px;border: 10px solid #0f0;}.box3 {position: fixed;width: 200px;height: 200px;padding: 10px;border: 10px solid #00f;}p {position: absolute;top: 0px;left: 0px;width: 50px;height: 50px;background-color: skyblue;}</style>
</head>
<body><div class="box1"><div class="box2"><div class="box3"><p></p></div></div></div>
</body>
</html>

根据绝对定位的参考元素的定位类型不同，有三种定位组合方式：子绝父相、子绝父绝、子绝父固，由于相对定位的祖先级位置更稳定，大多使用子绝父相的情况，也可以说成是父相子绝。

祖先元素参考点

如果绝对定位的参考元素是某个祖先级，参考点是盒子 border 以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding 区域。 left、top：参考点是祖先的 border 以内的左上顶点，对比点是盒子自身的左上角。 right、top：参考点是祖先的 border 以内的右上顶点，对比点是盒子自身的右上角。 left、bottom：参考点是祖先的 border 以内的左下顶点，对比点是盒子自身的左下角。right、bottom：参考点是祖先的 border 以内的右下顶点，对比点是盒子自身的右下角。

六、固定定位

属性值：fixed，固定的意思。参考元素：浏览器窗口。参考点：浏览器窗口的四个顶点。跟偏移量组合方向有关。由于浏览器窗口的四个顶点位置不会发生变化，会导致固定定位的元素会始终显示在定位位置。

适用场景：常用于制作网页回到顶部按钮

<!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>css定位—固定定位</title><style>div {width: 300px;height: 300px;background-color: skyblue;margin-top: 20px;}a {position: fixed;right: 100px;bottom: 100px;width: 100px;height: 50px;background-color: #0f0;font: 20px/50px "微软雅黑";text-align: center;text-decoration: none;}</style>
</head>
<body><a href="#">回到顶部</a><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

固定定位的性质

固定定位的元素脱离标准流，让出标准流位置，可以设置宽高，根据偏移量属性可以任意设置在浏览器窗口的位置。固定定位的元素会始终显示在浏览器窗口上。

七、定位应用

定位 position根据属性值不同有三种类型的定位效果，其中绝对定位和固定定位的元素会脱离标准流。三种定位在页面中有各自的使用场景

1.压盖效果

所有的定位类型都可以实现压盖效果。由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖。

2.居中效果

定位的元素，如果想在参考元素中居中显示，有自己的居中方法：

第一步：在居中的方向使用一个偏移量属性，例如 left，设置属性值为 50%。导致图片的左顶点移动到参考元素的中心位置。百分比形式的属性值，百分百参考的是参考元素的 border 以内的宽度、高度。

<!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>css-压盖效果</title><style>.box {position: relative;width: 300px;height: 300px;border: 10px solid #000;}p {position: absolute;left: 50%;width: 100px;height: 100px;background-color: #f00;}</style>
</head>
<body><div class="box"><img src="data:images/hat.png" alt=""><p></p></div>
</body>
</html>

第二步：给绝对定位的子盒子设置一个同方向的 margin，例如 margin-left，属性值为负的自身宽度的一半。

注意：不论子盒子的宽度是否比参考元素更宽，都能使用以上方法进行居中设置。

扩展应用

①解决标准流中，宽的子盒子在窄的父盒子中的居中，可以设置大的子盒子相对定位，利用相对定位居中的方法进行居中。

②浮动的元素居中，在不改变原始浮动状态情况下，可以利用相对定位居中方法。

八、压盖顺序

实际使用定位时，可能出现多个定位的元素加载到同一个位置的情况，这时候压盖的顺序是可以控制的。

1.默认压盖顺序

定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。如果都是定位的元素，在 HTML 中后写的定位压盖先写的定位。因此，书写代码时，需要注意压盖效果，必须合理设置 HTML 元素的书写顺序。

<!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>css层叠z-index</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;}.box2 {position: relative;top: -200px;width: 150px;height: 150px;background-color: #f00;}.box3 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: #0f0;}.box4 {position: fixed;left: 0;top: 0;width: 50px;height: 50px;background-color: #00f;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3</div><div class="box4">box4</div>
</body>
</html>

2.自定义压盖顺序z-index 属性

如果想更改定位的元素的压盖顺序，可以设置一个 z-index 属性。属性值：数字。

3.自定义压盖顺序注意事项

①属性值大的会压盖属性值小的，设置z-index属性的会压盖没有设置的。例如给其中一个盒子设置z-index的属性值为1，那么其他的盒子没有设置z-index属性，他会将加了z-index属性的盒子显示再最外层。

②如果属性值相同，比较HTML书写顺序，后写的压盖先写的。这里参考的是HTML标签元素的熟书写顺序，而不是css的书写顺序。

③z-index属性只能设置给定位的元素才会生效，如果给没有定位的元素设置，不会生效。

④父子盒模型中，如果父子盒子都进行了定位，与其他的父子级有压盖的部分：父级盒子：如果不设置z-index，后写的压盖先写的；如果设置了z-index，值大的压盖值小的。子级盒子：如果父级没有设置z-index属性，子级z-index大的会压盖小的；如果父级设置了 z-index值，无论子级值是多少，都是父级的值大的子级压盖父级值小的子级，俗称“从父效应”。

<!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>css层叠z-index</title><style>.box1 {width: 200px;height: 200px;background-color: skyblue;}.box2 {position: relative;top: -200px;width: 150px;height: 150px;background-color: #f00;}.box3 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;z-index: 2;background-color: #0f0;}.box33 {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: pink;}.box4 {position: fixed;left: 0;top: 0;width: 200px;height: 200px;z-index: 1;background-color: #00f;}.box5 {position: fixed;left: 0;top: 0;width: 50px;height: 50px;background-color: #ccc;}</style>
</head>
<body><div class="box1">box1</div><div class="box2">box2</div><div class="box3">box3<div class="box33">box33</div></div><div class="box4">box4<div class="box5">box5</div></div>
</body>
</html>

（18）css常用样式—定位属性相关推荐

1-2 CSS常用样式笔记
文章目录 CSS常用样式字体属性文本属性盒模型属性宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用清除默认样式高度height应 ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
html中fixed属性,css fixed固定定位属性
[实例介绍] css fixed固定定位属性当容器的position属性值为fixed时,这个容器即被固定定位了.固定定位和绝对定位非常相似,不过被定位的容器不会随着滚动条的拖动而变化位置.在视野 ...
html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...

（18）css常用样式—定位属性