position定位在html布局中的使用技巧和注意事项

2023年3月15日12:29:33网页制作评论40 views字数 853阅读模式

布局是html中非常重要的一部分,而定位在页面布局中也是使用频率很高的方法,今天我们就说说定位在布局中的使用技巧和注意事项。

position定位有4个属性,分别是static(默认),absolute(绝对定位),relative(相对定位),fixed(固定定位--相对于浏览器窗口)。

1.position:relative

生成的位置相对于自身定位的,需要注意的是使用position:relative的元素并没有脱离文档流,且原来的位置占用的空间依旧存在,只是位置发生了变化。一般使用relative来改变位置比较少,主要是用来设置子级的absolute定位的参考对象。

2.position:absolute

absolute定位是布局中最常用到的定位,其生成的位置是相对于带有position属性的父(父...)级来定位;如果父级都没有position属性,则相对于document来定位;使用absolute定位后,定位元素是脱离文档流的,这时候父级会检测不到定位元素的宽高。inline元素使用absolute定位之后,可以对其设置宽高;元素是不可以同时使用绝对定位和浮动的。

position定位在html布局中的使用技巧和注意事项

可以看到在对子级span标签absolute定位之后,可以设置宽高,且父级无法检测到子级宽高,所以无法有子级来撑开;

3.position:fixed

fixed定位是相对于浏览器窗口来定位的,所以也是脱离了文档流,与absolute一样,父级会检测不到定位元素的宽高。inline元素使用absolute定位之后,可以对其设置宽高;元素是不可以同时使用fixed定位和浮动的。

z-index属性:

使用定位后的元素都会有z-index属性,

同级定位元素这个值越大,其显示越靠前

。这项属性需要注意的是比较时是同级定位元素进行比较。

position定位在html布局中的使用技巧和注意事项

当两个拥有子元素的父级元素(绿色和灰色DIV)重叠时,层级高的父元素(绿色DIV)里的子元素(黄色DIV)永远在上层,即使层级底的父元素(灰色DIV)里的子元素(红色DIV)z-index的值较大。

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/31296.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定