css Position(定位) [第八天]
文章目录
- position
-
- 文档流
- static（静态定位）
- fixed（相对浏览器窗口是固定位置）
- relative（相对其正常位置）
- absolute（绝对定位）
- sticky（粘性定位）
-
- 使用条件：
- 问题（无法解决）
-
- 重叠的元素（z-index）
position
position 属性指定了元素的定位类型。
position 属性的五个值：
- static
- relative
- fixed
- absolute
- sticky
![css Position(定位) [第八天]_第1张图片](http://img.e-com-net.com/image/info8/37a07ef952f94cecbffe099c30e4bf61.jpg)
注意：
元素可以使用的顶部，底部，左侧和右侧属性定位，然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
文档流
一、什么是文档流 ？
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。
二、什么是脱离文档流 ？
元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。
脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
static（静态定位）
HTML 元素的默认值，即没有定位，遵循正常的文档流对象（不脱离文档流）。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed（相对浏览器窗口是固定位置）
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
注意：
-
Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持
-
Fixed定位使元素的位置与文档流无关，因此不占据空间
-
Fixed定位的元素和其他元素重叠
relative（相对其正常位置）
移动相对定位元素，但它原本所占的空间不会改变（不脱离文档流）；相对定位元素经常被用来作为绝对定位元素的容器块。
absolute（绝对定位）
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于< html>。
absolute 定位使元素的位置与文档流无关，因此不占据空间，absolute 定位的元素和其他元素重叠。
sticky（粘性定位）
sticky 英文字面意思是粘、粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位，粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
未滚动超出目标区域时，它的行为就像 position:relative; （当然是没有设置任何bottom、left…的，菜鸟感觉更像static）； 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 它会固定在目标位置，表现为在跨越特定阈值前为相对定位，之后为固定定位。如果一开始元素位置就超出目标区域，则直接按position:fixed; 处理！
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
问题（无法解决）
注意：
- 如果 position:sticky; 的元素没有设置宽度，则left、right无效！
- 设置了，有时候移动到一定位置，也会失效！（注意：像我底下这样 [靠 white-space:nowrap; 使文本不换行，撑大body] 才会产生的bug；如果是直接设置body的宽度而产生的scroll则不会有该bug）
实例：
<p>尝试滚动页面。p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。p>
<div class="sticky">
我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
div>
<div class="sticky2">
我是粘性定位
div>
<div class="sticky4">
我是粘性定位
div>
<div class="sticky3">
我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!pppppppppppppppppppppppp我是粘性定位!我是粘性定位!我是粘性定位!我是粘性定位!
div>
<div style="padding-bottom:500px">
<p>滚动我p>
<p>来回滚动我p>
<p>滚动我p>
<p>来回滚动我p>
<p>滚动我p>
<p>来回滚动我p>
div>
div.sticky {
margin-left: 100px;
display: inline;
position: -webkit-sticky;
position: sticky;
top: 10px;
left: 10px;
white-space: nowrap;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
div.sticky2 {
margin-left: 100px;
width: 200px;
position: -webkit-sticky;
position: sticky;
top: 10px;
left: 10px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
div.sticky3 {
margin-left: 100px;
width: 1000px;
margin-right: 100px;
position: -webkit-sticky;
position: sticky;
top: 10px;
left: 10px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
div.sticky4 {
margin-left: 100px;
position: -webkit-sticky;
position: sticky;
top: 10px;
left: 10px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
大家可以直接用我的代码运行，可以发现真的很奇怪！暂时没有解决是为什么！
2020/9/26 补：
今天在做vue的东西时，突然发现好多粘性定位不了，最后才发现
粘性定位只能作用于最外围外的父元素，如果是在子元素里面使用，则无法生效
实例：
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
style>
head>
<body>
<p>尝试滚动页面。p>
<div>
<div class="sticky">我是粘性定位!div>
div>
<div style="padding-bottom:2000px">
<p>滚动我p>
<p>来回滚动我p>
<p>滚动我p>
<p>来回滚动我p>
<p>滚动我p>
<p>来回滚动我p>
div>
body>
html>
代码运行地址：菜鸟教程
注意：
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。
重叠的元素（z-index）
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素，z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的上面。
注意：
-
如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
-
z-index仅在定位元素（position不等于static）中有效；这个属性是个“拼爹”的属性。(如果父元素层级低，那么子元素再怎么努力都没有用）