【CSS定位position】

CSS定位position


定位:position

概念:把一元素放置到需要放的网页位置;

属性值:static、relative、absolute、fixed、inherit;

位置声明:top、bottom、left、right;

absolute、fixed会使元素脱离文档流;

特点:所有元素都可以进行定位处理,定位后具有块的属性。


相对定位:relative

使元素偏移某个距离,所占空间仍然保留;

实际开发:元素不会脱离文档流,但是可以设置top、left等值进行操作,而且设置也是生效的。

1、如果元素的前面没有其他元素时,参照父级(最近)的内容区的左上角为原始点结合top、left、right、bottom属性进行定位;

2、如果元素的前面有其他元素,则针对上一个元素的位置进行定位。


绝对定位:absolute

设置绝对定位的元素,会脱离文档流;(具有层叠关系)

激活元素的absolute,必须指定left,right,top,bottom 属性中的至少一个;

绝对定位的元素相互层叠时,不具有 margin效果,但仍有 padding 和 border效果 。


绝对定位与相对定位的关系

(相对定位是相对于元素在文档流中初始位置的;而绝对定位是相对于最近的已经定位的祖先元素。)

1、如果父级(无限)没有设定position属性,那么当前的absolute则结合top,right,left,bottom属性以浏览器左上角为原始点进行定位;

2、如果父级(无限)设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top,right,left,bottom属性以父级(最近)的左上角为原始点进行定位。


相对浏览器定位:fixed

相对于浏览器窗口的指定坐标定位;

元素的位置可通过left、right、top、bottom属性来规定;

IE6.0及以下版本的浏览器不支持position: fixed;

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,715评论 1 92
  • 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Positio...
    蠢淡淡不蠢阅读 3,630评论 0 0
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 8,113评论 0 7
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 13,310评论 0 8
  • 那个突然躲在阳台唱歌唱哭自己的女孩儿。 又哭又笑的孩子 应该是准备考研太累了 需要释放自己 舍友那个傻孩子
    折草阅读 1,373评论 0 0

友情链接更多精彩内容