【百度前端学院学习笔记】Day7 定位
几大定位方式
position: static
这是每个元素的默认值，因此给一个没有指定position属性的元素添加position: static是没有任何作用的，而且也会被认为是没有指定位置属性
positon: relatvie
相对定位的意思是相对于原来在normal flow里的正常位置的改变量，可以通过top,right,bottom,left来改变位置，其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙，即偏移元素仍然占据着它没偏移前的空间。，因此位置改变后该元素可以与页面上的其他元素重叠。
例如，给黄色背景的p元素添加设置：
positon: relative
top: 30px; //从上往下推开30px
left: 30px; //从左往右推开30px
效果如下：
positon: absolute
绝对定位的元素不再存在于normal flow中。相反，它存在于它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能 。例如，弹出信息框和控制菜单；翻转面板…
将上面的黄色p的属性改为：
position: absolute;
top: 30px; //从上往下推开30px
left: 30px; //从左往右推开30px
则会出现：
理解为什么产生这个效果，需要搞清楚一些点：
- 黄色背景的
p已经被剔出了normal flow之外，所以原第1和原第3个p之间看起来就像不存在原来这个黄色p一样。 - absolute的
top,right,bottom,left是相对于包含它的最近的拥有定位属性的祖先元素。如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。所以这里的top: 30px，left: 30px就是相对于这个初始块容器而言的。 - 绝对定位元素在HTML源代码中，是被放在
<body>中的，但是在最终的布局里面，它离初始块容器(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素。 为了演示这一点，将以下声明添加到body规则中：
position: relative;
则定位的元素现在当对于<body>元素
z-index
在我们已经看到的示例中，我们在定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素会遮盖未定位的元素。 当我们有不止一个的时候，html文档中中后定位的元素将遮盖先定位的元素。如果要改变遮盖关系，就需要通过z-index来指定谁在上。z-index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。 较高的值将高于较低的值，这取决于您使用的值。 使用2和3将产生与300和40000相同的效果，因为我们浏览网页相当于是俯视图。
z-index: 1;
position: fixed
与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于<html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身，页面向下滚动，那么fixed的元素也会跟着向下滚动以保持固定位置。这意味着可以创建固定的有用的UI项目，如持久导航菜单。
看一个absolute和fixed的例子：
h1标签是fixed，随着页面的滚动，它依旧会保持固定位置
h1标签是absolute，随着页面的滚动，它停留在被划过的上方页面
position: sticky
还有一个可用的位置值称为 position: sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
可以参考这个例子：
<h1>Sticky positioning</h1>
<dl>
<dt>A</dt>
<dd>Apple</dd>
<dd>Ant</dd>
<dd>Altimeter</dd>
<dd>Airplane</dd>
<dt>B</dt>
<dd>Bird</dd>
<dd>Buzzard</dd>
<dd>Bee</dd>
<dd>Banana</dd>
<dd>Beanstalk</dd>
<dt>C</dt>
<dd>Calculator</dd>
<dd>Cane</dd>
<dd>Camera</dd>
<dd>Camel</dd>
<dt>D</dt>
<dd>Duck</dd>
<dd>Dime</dd>
<dd>Dipstick</dd>
<dd>Drone</dd>
<dt>E</dt>
<dd>Egg</dd>
<dd>Elephant</dd>
<dd>Egret</dd>
</dl>
当我们在<dt>元素上添加position: sticky，并将top的值设置为0，当标题滚动到视口的顶部时，支持此属性的浏览器会将标题粘贴到那个位置。随后，每个后续标题将替换前一个标题，直到它向上滚动到该位置。
dt {
background-color: black;
color: white;
padding: 10px;
position: sticky;
top: 0;
left: 0;
margin: 1em 0;
}
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
