在某网课学习前端笔记整理css篇07-常用几种定位

常用的几种定位

static

默认的position的值，好像没啥说的。
relative

相对定位

元素相对于自身的位置的偏移，但是还会占据着本来的位置。
absolute

绝对定位

元素***相对于父级含有定位属性（sticky，absolute，fixed，relative，其他的无效）的元素的偏移***。正常情况为***脱离了文档流***，和float类似，但是不会有文字环绕效果，而是会盖住了文字。但是如果设置了top，left，right，bottom的话，它会相对有一般定位属性的父级来偏移。
```
<style >
  .outer{
    background-color:blue;
    width: 300px;
    height: 200px;
    position:relative;
  }
  .inner{
    background-color:red;
    width: 100px;
    height: 100px;
    position: absolute;
    top:10px;
  }
</style>
<div class="outer">
  <div class="inner"></div>
  <span>aaa</span>
</div>
```
fixed

固定定位

相对于整个浏览器窗口的偏移，并且也脱离了文档流，但没有文字环绕效果，不会随着浏览器窗口的滚动而滚动。小广告一般好像是这么做的。

<style >
  div{
    background-color: red;
    position: fixed;
    top:100px;
    left:50px;
  }
</style>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div ><h2>重金求子！！！</h2></div>

sticky

粘性定位

不允许超过浏览器窗口的临界值，如果超过临界值则变为类似fixed的状态。淘宝的搜索框差不多就可以用这种定位实现（实际上好像不是的）。不过这种定位的兼容性好像不太好（网上看到的）。

注：这个sticky的元素好像不能内嵌，否则失效了？？

<style >
  .outer{
    background-color: blue;
    /*position: sticky;*/
    width:400px;
    top:0px;
    margin-top: 100px;
  }
  .inner{
    background-color: red;
    width:300px;
    position: sticky;
    top:0px;
  }
</style>
<span>aaaa</span>
<div class="inner"><h2>重金求子！！！</h2></div>
<br>
<div class="outer">
  <div class="inner"><h2>重金求子2！！！</h2></div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

层叠上下文

层叠上下文我的理解是等级。玄幻世界的功法是分等级的，比如天、地、玄、黄四个等级。然后呢，每个等级还可以分为初级、中级、高级。然后呢，每个等级还可以按一个标准继续往下分。这里的每个可以继续划分的等级就是一个层叠上下文。html中的层叠上下文指的是（参考网上的文章链接：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/）：

a. 页面根元素天生具有层叠上下文，称之为“根层叠上下文”；

b. z-index为数值(auto不会生成层叠上下文）的定位元素（relative，absolute，fixed，fexed在一些浏览器不会生成层叠上下文）的传统层叠上下文；

c. 一些css3属性会生成层叠上下文，比如元素的opacity值不是1.
层叠水平

同一层叠上下文元素下的子元素的排列等级叫做层叠水平。
层叠顺序

参考链接：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

同一个层叠上下文的元素的排列顺序，如下图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnI0aSIa-1583486866484)(层叠在这里插入图片描述顺序.png)]

层叠规则

两个元素比较规则：

a.层叠上下文相同，比较按在层叠顺序（看成是排行榜）比较，如果层叠水平（看成是排第几）一样，则后来居上；

b.层叠上下文不同，比较按在同一层叠上下文的祖先元素的层叠水平比较，如果该层叠水平一致，则后来居上。

上面说的元素的层叠上下文指的是离该元素最近的是层叠上下文的祖先。

通俗的解释：一个老爸要给她女儿相亲（假设这是古代，老爸说了算），要求必须家里是当官的。于是很多人慕名而来，然后他老爸看了下，先看谁家的官最大（这里的官就相当于层叠上下文），官大的优先。但是呢，发现官大的那家来了两个人。如果这两个人差不多的话，那就选后面来的那个；如果其中有一个更优秀点，那么他就选那个优秀的（层叠顺序）。

网上的：
1. **谁大谁上：**当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。
2. **后来居上：**当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

低调的帅

发布了27 篇原创文章 · 获赞 0 · 访问量 230

私信关注

在某网课学习前端笔记整理css篇07-常用几种定位

常用的几种定位

猜你喜欢