发表于： 2019-02-18 23:06:46
1 415
今天完成的事情：
position 使用 relative, absolute, fixed 的区别是什么
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
relative
相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）
相对定位不脱标
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
无论父级存在不存在，无论有没有TRBL（上 右 下 左 ），均是以父级的左上角进行定位，但是父级的Padding属性会对其影响，如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位
相对定位的用途
如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
- （1）微调元素
- （2）做绝对定位的参考，子绝父相
相对定位的定位值
- left：盒子右移
- right：盒子左移
- top：盒子下移
- bottom：盒子上移
PS：负数表示相反的方向。
absolute
绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在
格式举例如下：
position: absolute; /*绝对定位*/
left: 10px; /*横坐标*/
top/bottom: 20px; /*纵坐标*/
绝对定位脱标
绝对定位的盒子脱离了标准文档流。
所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
脱标：即会重叠：
1 发生了重叠 （因为这里的img设置了z-index为1 默认为0 ）所以是img 重叠了 input（“请”字被img覆盖了） 要显示“请”字怎么办？在input中也使用绝对定位 然后 left：20px(大小随便写的)
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽、高了。
绝对定位的参考点（重要）
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角
以盒子为参考点
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。
以下几点需要注意。
（1） 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
<div class="box1"> 相对定位
<div class="box2"> 没有定位
<p></p> 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素
</div>
</div>
再比如：
<div class="box1"> 相对定位
<div class="box2"> 相对定位
<p></p> 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素
</div>
</div>
（2）不一定是相对定位，任何定位，都可以作为儿子的参考点：
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。
让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
我们可以总结成一个公式：
left:50%; margin-left:负的宽度的一半
工程应用：
“子绝父相”（即子为绝对定位 父为相对定位）有意义：这样可以保证父亲没有脱标，儿子脱标在父亲的范围里面移动。于是，工程上经常这样做：
父亲浮动，设置相对定位（零偏移），然后让儿子绝对定位一定的距离。
（3）绝对定位的儿子，无视参考的那个盒子的padding：
下图中，绿色部分是父亲div的padding，蓝色部分p是div的内容区域。此时，如果div相对定位，p绝对定位，那么， p将无视父亲的padding，在border内侧为参考点，进行定位：说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响。
z-index属性：
z-index属性：表示谁压着谁。数值大的压盖住数值小的。
有如下特性：
（1）属性值大的位于上层，属性值小的位于下层。
（2）z-index值没有单位，就是一个正整数。默认的z-index值是0。
（3）如果大家都没有z-index值，或者z-index值一样，那么在HTML代码里写在后面，谁就在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
（4）只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的元素不能用。
（5）从父现象：父亲怂了，儿子再牛逼也没用。意思是，如果父亲1比父亲2大，那么，即使儿子1比儿子2小，儿子1也能在最上层。
z-index属性的应用还是很广泛的。当好几个已定位的标签出现覆盖的现象时，我们可以用这个z-index属性决定，谁处于最上方。也就是层级的应用。
层级：
（1）必须有定位（除去static）
（2）用z-index来控制层级数。
总结：
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值
注意 : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。
什么是文档流？
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
只有三种情况会使得元素脱离文档流，分别是：浮动绝对定位和相对定位。
明天计划的事情：
中午之前完成任务4
收获：
1学会了使用calc
2大概理解了 定位position 使用 relative, absolute, fixed 的区别是什么
返回列表
评论