【总结整理】行内标签span设置position:absolute/float属性可以设置宽度与高度

postion:absolute 跳出文本流,不是行内元素,设置宽高有效,我的理解。

引用下曹刘阳写的《编写高质量代码-web前端开发修炼之道》一书中看到的一句话:
position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外),
只要设置了position:absolute、
float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素。


postion属性一共有4个值,分别为static,absolute,relative和fixed。
(1)static为默认值,它表示块保持在原本应该在的位置上,即改值没有任何移动的效果。

(2)当子块的postion值设为absolute时子块已经不再从属于父块。
注:top,right,bottom和left这4个css属性,他们都是配合position属性使用的,不但可以设置为绝对像素,也可以设置为表分数,
表示块的各个边界离页面边框(postion=absolute)的距离,或者各个边界离原来位置(postion=relative)的距离。
只有当postion属性设置为absolute或者relative时才能生效。如果设置为static,则子块不会有任何变化

(3)块的postion设置为relative时,与将其设置为absolute时完全不同。这时子块是相对于其父块来进行定位的,同样配合top,right,bottom和left这4个属性来使用的

  1. 设置absolute会使得inline元素被“块”化,这在上一节将display时已经说过;
  2. 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多;
  3. 上文提到了absolute会使元素悬浮在页面之上,如果有多个悬浮元素,层级如何确定?答案是“后来者居上”


原文地址:https://www.cnblogs.com/lianghong/p/8022911.html