定位
一文讲清楚css（不应包括css3）常用的定位
- 开启定位的元素。脱离文档流后，后面写的会覆盖前面写的。（fix absolute)
一、 相对定位 position:relative;
相对定位不脱离文档流，盒子设置相对定位以后，可以相对于自己原本的位置对盒子的各个方向位置的间距进行调整。
div {
position: relative;
top: 100px;
left: 20px;
/*right: 20px;
bottom: 20px;*/
}
相对定位的特点：
- 不脱离文档流，不对其它的盒子产生影响。
- 发生相对定位的盒子显示的层级比普通文档流的盒子高。
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
- 定位元素会覆盖普通的元素。
- 都发生定位的元素，后写的会覆盖在先写的元素身上。
- left 和 right不能一起写，top 和 bottom 不能一起写。实在一起写了，left和top生效。
- 相对定位的元素也能浮动，但是不推荐。
- 相对定位的元素，也能通过margin调整位置，但是不推荐。
注意： 大多数时候，相对定位和绝对定位一起使用。
二、绝对定位
div {
position: absolute;
top: 100px;
left: 20px;
/* right: 20px;
bottom: 20px;*/
}
包含块
- 没有脱离文档流的元素, 父元素就是包含块。
- 脱离文档流的元素，第一个开启定位的祖先元素(不管是不是相对定位)，就是它的包含块。
定位规则
- 绝对定位是相对于它的包含块来进行定位的。一般给绝对定位加一个定位为relative的父元素进行确定它的位置。
- 绝对定位和浮动不能一起使用，如果一起使用了，听绝对定位的指挥。
div {
position: absolute;
background: red;
left: 0;
top: 0;
float: right; /*不能生效*/
}
- 无论什么元素，即使是行内元素，使用绝对定位以后，默认宽高由内容撑开。也能设置元素的宽和高。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
.container {
height: 400px;
width: 600px;
background: skyblue;
position: relative;
}
.box {
background: wheat;
/*给span设置的宽高是生效的*/
height: 100px;
width: 100px;
}
.div1 {
background: orange;
}
.box2 {
position: absolute;
background: red;
left: 0;
top: 0;
}
.div3 {
background: #f231ff;
}
</style>
</head>
<body>
<div class="container">
<div class="box div1">1</div>
<span class="box box2">2</span>
<div class="box div3">3</div>
</div>
</body>
</html>
- 使用绝对定位以后，依然可以设置margin:设置left，就能设置margin-left,但是不能设置margin-right(逻辑不自洽)。
三、固定定位 fix
固定定位的元素，元素的位置参考的是当前宽口的视口。
对pc浏览器来说。视口是我们能看见的可视区域。
规则：
- 开启方式：
position:fix; - 可以使用 left、right、top、bottom设置四个方向的位置。
- 使用固定定位以后，元素脱离文档流，如果同时设置浮动，浮动失效。
- 和绝对定位相似，也能通过margin调整位置。
- 和绝对定位为相似，开启定位之后，无论什么元素，都能够设置宽高。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
.container {
height: 400px;
/*width: 600px;*/
background: skyblue;
position: relative;
padding: 10px;
}
.box {
background: wheat;
height: 100px;
width: 100px;
}
.div1 {
background: orange;
}
.box2 {
position: fixed;
background: red;
top: 0;
right: 0;
}
.div3 {
background: #f231ff;
}
</style>
</head>
<body>
<div class="container">
<div class="box div1">1</div>
<div class="box box2">2</div>
<div class="box div3">3</div>
</div>
</body>
</html>
四、粘性定位
1. 设置定位
- 给元素设置
position:stucky即可实现粘性定位。 - 可以使用left、top、right、bottom 调整位置，不过最常用的是top。
2. 参考点在哪？
- 离设置粘性定位元素最近的拥有"滚动机制的祖先元素"，即便这个元素不是最近真实可滚动的祖先（设置overflow:scroll就参考它）。
3. 特点
- 不会脱离文档流，是一种专门用于窗口滚动的新定位机制。
- 最常用的值是top。
- 可以和浮动同时设置
- 粘性定位的元素，也能通过margin调整位置
和相对定位的特点基本一直，不同的是：粘性定位的元素到达某一个位置以后就会固定。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
.container {
background: gray;
text-align: center;
height: 200px;
overflow: auto;
}
.page-header {
height: 80px;
line-height: 80px;
vertical-align: middle;
background: orange;
}
/*选中类名为iterm的后代 div ,且该div是第一个孩子。*/
.item div:first-child {
font-size: 40px;
background: deepskyblue;
position: sticky;
/*参考祖先 元素中第一个具有滚动行为的元素*/
/*当该元素的父容器划走的时候，元素就会被划走*/
top: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">头部区域</div>
<div class="content">
<div class="item">
<div class="first">A</div>
<h2>A1</h2>
<h2>A2</h2>
<h2>A3</h2>
<h2>A4</h2>
<h2>A5</h2>
<h2>A6</h2>
<h2>A7</h2>
<h2>A8</h2>
</div>
<div class="item">
<div class="second">B</div>
<h2>B1</h2>
<h2>B2</h2>
<h2>B3</h2>
<h2>B4</h2>
<h2>B5</h2>
<h2>B6</h2>
<h2>B7</h2>
<h2>B8</h2>
</div>
<div class="item">
<div class="third">C</div>
<h2>C1</h2>
<h2>C2</h2>
<h2>C3</h2>
<h2>C4</h2>
<h2>C5</h2>
<h2>C6</h2>
<h2>C7</h2>
<h2>C8</h2>
</div>
</div>
</div>
</body>
</html>
五、定位的层级
- 原始的文档流div 处于最下层。
- 其它开启定位的元素（relative absolute fixed）处于上层，他们之间没有层级的先后顺序。 谁出现在后面，谁的层级就高。
- 可以通过 z-index的，改变定位元素的层级。
关于z-index:
1. 只有开启定位的元素才能设置 z-index,普通的元素设置无效。
2. z-index 的默认值是auto，浏览器会根据布局情况分配一个值,大多数时候都是0。
3. z-index的值可以为负数，值越大，层级越高，越靠近用户。
4. z-index的显示会受到包含块的影响，如果当前盒子的包含块层级很低，那么即使自己再怎么高，也比不过它包含块的兄弟中层级低的元素。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin: 10px;
border: 1px solid black;
position: relative;
width: 400px;
}
.container div {
height: 100px;
width: 100px;
}
.div1 {
background: darkgray;
/*没有开启定位的元素，设置 z-index是不生效的*/
z-index: 100;
}
.div2 {
background: orange;
position: relative;
top: -70px;
left: 30px;
/*z-index 默认值是auto 浏览器会根据布局情况分配一个值,大多数时候都是 0*/
z-index: 0;
}
.div3 {
background: yellow;
position: absolute;
top: 60px;
left: 60px;
}
.div4 {
background: red;
position: fixed;
top: 100px;
left: 100px;
}
.biggerZ-index{
height: 200px;
width: 200px;
background: darkkhaki;
position: relative;
z-index: 100;
}
.test{
height: 100px;
width: 100px;
background: green;
position: relative;
z-index: -200;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="div1">原始的</div>
<div class="div2">相对定位</div>
<div class="div3">绝对定位</div>
<div class="div4">固定定位</div>
</div>
<div class="biggerZ-index">
<div class="test">我的z-index = -200 ，但是我父亲比较厉害</div>
</div>
<!--总结
关于z-index:
1. 只有开启定位的元素才能设置 z-index,普通的元素设置无效。
2. z-index 的默认值是auto，浏览器会根据布局情况分配一个值,大多数时候都是0。
3. z-index的值可以为负数，值越大，层级越高，越靠近用户。
4. z-index的显示会受到包含块的影响，如果当前盒子的包含块层级很低，那么即使自己再怎么高，也比不过它包含块的兄弟中层级低的元素。
-->
</body>
</html>
六、定位越过padding
说明：
- 默认盒子模型中，子元素的位置只能存在于包含块的content区域。不能占据padding和border的位置。
- 但是，开启定位以后，定位元素会把padding也当作content区域，直接参考其包含块的border的内边缘进行定位。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
.container {
width: 500px;
height: 300px;
padding: 20px;
background: yellow;
position: relative;
border: 10px solid black;
}
.inner{
background: red;
width: 100px;
height: 100px;
position: absolute;
/*发现元素可以越过padding,但是不能越过border 。不再以父元素的content作为参考,而是以父元素的border+padding作为参考*/
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">123456</div>
</div>
</body>
</html>
七、定位为的特殊应用
针对绝对定位和固定定位的特殊应用：使内容充满包含块、水平垂直居中。
1. 使内容填满包含块。
.parent {
height: 300px;
background: darkgray;
position: relative;
}
.son {
background: orange;
font-size: 20px;
padding: 20px;
border: 5px solid black;
position: absolute;
/*右边超出去了*/
/* left: 0;
top: 0;
width: 95%;*/
/*左右留出10px 然后居中对齐*/
left: 10px;
right: 10px;
/*上下都填满*/
top: 0;
bottom: 0;
}
2. 居中对齐
- 方案一：设置top bottom right left 全为0, margin :auto 。
.parent{
height: 300px;
background: darkgray;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: orange;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
- 方案二：
.parent{
height: 300px;
background: darkgray;
position: relative;
}
.son{
width: 100px;
height: 100px;
background: orange;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
- 方案三：
.parent {
height: 300px;
background: darkgray;
position: relative;
}
.son {
width: 100px;
height: 100px;
background: orange;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
注意： 使内容填满父元素的时候不要设置宽高，居中对齐一定要设置宽高。
