css定位属性之position细致分析

css中position的属性想必大家不会陌生,我们常用的三个属性如下

absolute生成绝对定位的元素,会不占用原位置进行定位(相当于浮动的特性,下一级元素会上行占用该位置),依据最近有定位的父级进行定位,如果最近父级无,直至相对网页Document进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative生成相对定位的元素,相对于其原位置进行定位,且保留原位置。 例如"left:20" 会向元素的LEFT位置添加20 像素。

fixed生成绝对定位的元素,相对于Browser窗口进行定位,始终保持在浏览器窗口之内。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

在Z-index使用上,被用于将在一个元素放置于另一元素之后,即相对于浏览器的样式先后展示,一般同absolute一起使用,Z-index的灵活使用,可以起到锦上添花的效果。relative适合作为absolute的父级定位样式里使用,对于fixed使用部分前端开发攻城狮也喜欢作为网页锚点使用。

参考:https://www.qwzyj.com/thread-113-1-1.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,168评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 3,081评论 0 7
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,577评论 0 5
  • 在CSS中关于定位的内容是:position:relative | absolute | static | fix...
    feelinghappy618阅读 710评论 0 0
  • 前言 今天呢,想聊聊css里的position属性。也就是元素定位属性。目的呢,是为了梳理一下自己学习工作中积累的...
    白吟灵阅读 631评论 0 0

友情链接更多精彩内容