position总结

Posted Y_WEB

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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(固定定位):

 

 

以上是关于position总结的主要内容,如果未能解决你的问题,请参考以下文章

Position定位知识点总结

CSS中float与position的总结归纳

CSS中float与position的总结归纳

总结一下CSS中的定位 Position 属性

position属性的总结

[转]总结一下CSS中的定位 Position 属性