position总结
Posted Y_WEB
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了position总结相关的知识,希望对你有一定的参考价值。
Position总结
关于position我目前能想到的知识点:
Position:absolute(绝对定位):
问题
- absolute相对于谁定位?
- absolute是否脱离文档流?什么情况下不会脱离?
- absolute的百分比表示(left:50%...)是基于谁的?
- absolute是否可以和float(浮动)共用?
- absolute与margin/padding 之间互相的影响?
- Absolute定位后是什么类型的元素
解答
- 生成绝对定位的元素相当于static定位(默认值,就是不定位)以外的第一个父元素进行定位
- 我们在给元素添加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(相对定位):
- relative相对于谁定位?
- relative是否脱离文档流?什么情况下不会脱离?
- relative的百分比表示(left:50%...)是基于谁的?
- relative是否可以和float(浮动)共用?
- relative与margin/padding 之间互相的影响?
基本也是这五个问题
- relative相对于自己定位
2.relative是不会脱离文档流的
3.这个百分比基于其父元素的width或者height计算的,不管父元素有没有定位,所以说如果这个元素的父元素就是body,而body没有设定高度,那么此时的百分比是不起作用的
4.能共用,两个属性都会起作用(估计是用了relative属性的元素没有脱离文档流,所以float会起作用)
5.同absolute ,会把margin,padding算进box中,不会叠加,跟absolute相同
Position:fixed(固定定位):
以上是关于position总结的主要内容,如果未能解决你的问题,请参考以下文章