Position：absolute

Posted 2023-05-05

参考技术A css position属性允许你定位一个元素，通过使用top，left，bottom，right属性，当然你必须先设定position的属性值，以便告诉浏览器依据什么方式进行定位。

因为绝对定位（position：absolute）在实际应用中有着十分重要的地位，特别进行深度探究以便在使用中能更得心应手。
元素设置position：absolute后主要会带来4个影响。

1、2、和4都好理解这里对2进行着重分析。
因为定位可以是realitive、absolute和fixed。故父级元素会出现3中情况。
1.父元素relative(√)。
.parentswidth: 200px;height:200px;position: relative;background: #f60; .boxwidth: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

第二个问题top、right、bottom、left定位到最近一个具有定位设置父元素的边缘的距离。这个边缘指的是什么？
因为盒子的margin 、border、padding、及content都会影响盒子的尺寸。在这里对父元素为relative的模型进行依次添加。
1.添加margin:50px 0 0 50px;

2.添加border-left: 50px solid #000;border-top: 50px solid #000;

3添加padding:50px 0 0 50px;

第三个问题left除了设置length具体尺寸，%相对于父容器的尺寸，默认会设置成auto，通过浏览器来计算位置。那么具体是怎么计算的呢。父元素为relative的模型进行探究。
1.子元素top: auto;left: auto;

2.父元素添加margin-left:50px;

3.父元素继续添加border-left:50px solid #000;

4.父元素继续添加padding-left:50px;

5.父元素继续添加padding-top:50px;

position总结

Position总结

关于position我目前能想到的知识点：

Position:absolute(绝对定位):

问题

1. absolute相对于谁定位？
2. absolute是否脱离文档流？什么情况下不会脱离？
3. absolute的百分比表示(left:50%...)是基于谁的？
4. absolute是否可以和float(浮动)共用？
5. absolute与margin/padding 之间互相的影响？
6. Absolute定位后是什么类型的元素

解答

1.        生成绝对定位的元素相当于static定位(默认值，就是不定位)以外的第一个父元素进行定位
2.        我们在给元素添加position：absolute；属性时它是不会脱离文档流的，而我们一旦通过’left’,’top’,’right’,’bottom’,来给元素调整位置的时候它便会脱离文档流

对于这个问题有测试了几次，发现只要设置了position：absolute就脱离文档流

　　3.       基于static以外的第一个父元素的宽度(width)或者高度(height)进行计算，如果这个定位的元素上一级父元素就是body，那么这个元素的百分比基于屏幕的可视宽度或者高度进行计算(不是基于body定位啊，除非body是static以外的定位)

　　4.       absolute是不能和float(浮动)共用的，如果一个元素同时有position:absolute；和float:left那么position优先级会高于float

　　5.     　首先来说absolute和margin之间的联系

这么一个结构，box父元素并相对定位，son子元素绝对定位，而且有一个margin-left：20px，那么如果我在给这个元素添加一个left：20px;这个元素依然会向右边移动20px,说明absolute在定位的时候是吧margin算进来的(不会重叠)

 

再来说padding与absolute，padding会把整个盒子称大，absolute在计算的时依然会把padding算进在box内

　　6．元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框(由于float也是脱离文档流，所以也会形成块级)

　　Position:relative(相对定位):

1. relative相对于谁定位？
2. relative是否脱离文档流？什么情况下不会脱离？
3. relative的百分比表示(left:50%...)是基于谁的？
4. relative是否可以和float(浮动)共用？
5. relative与margin/padding 之间互相的影响？

基本也是这五个问题

1. relative相对于自己定位

 

　　2.relative是不会脱离文档流的

　　3.这个百分比基于其父元素的width或者height计算的,不管父元素有没有定位，所以说如果这个元素的父元素就是body，而body没有设定高度，那么此时的百分比是不起作用的

　　4.能共用，两个属性都会起作用(估计是用了relative属性的元素没有脱离文档流，所以float会起作用)

　　5.同absolute ，会把margin，padding算进box中，不会叠加，跟absolute相同

Position:fixed(固定定位):