position定位

position:定位 

给元素定位后不能设置浮动,会改变行标签和块标签的表现(参考float),块级标签不再继承父级的宽度,行级标签可以设置宽高。给元素设置定位后,一定要初始化位置。

position:fixed;固定定位  可以设置负数和百分比 以浏览器视窗定位的一种方式

position:relative;相对定位  相对于元素的当前位置偏移

不会改变元素的默认表现,主要用于绝对定位的组合,帮助绝对定位元素确定坐标

position:absolute;绝对定位  定在文档中的某个位置,不会改变

position:static;默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)

设置了绝对定位的元素,如果父级元素没有设置absolute或者relative或者fixed,那么该元素会以文档进行偏移(绝对定位没有给其祖辈元素设置相对定位(relative)或绝对定位(absolute)或者固定定位(fixed),则相对于浏览器窗口定位;就与fixed没什么别),如果父级元素设置了absolute或者relative或者fixed,那该元素会以父级元素进行偏移

position应用场景如:(涉及到层级问题)

1.网页两侧浮动窗口(播放器,置顶按钮,浮动广告,功能按钮等)

2.导航栏浮动置顶。

3.隐藏div实现弹窗功能(通过设置div的定位和z-index控制div的位置和出现隐藏)

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

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,268评论 1 92
  • 我们在布局的时候经常会使用到position的属性,那么你真的完全了解它吗? position概念 positio...
    一木_qintb阅读 2,060评论 0 4
  • 大家好,我是IT修真院郑州分院第6期的学员王栋,一枚正直、纯洁、善良的前端程序员 今天给大家分享一下,修真院官网C...
    17064阅读 2,339评论 0 1
  • 在学习 position 之前,先来看一下几个适用于所有 css 属性的值: inherit、initial、un...
    Kami暮色阅读 2,849评论 0 2
  • 和风旭日,花香醉人,家乡的春天总是那么美好! 这是小茹四年大学后在家过的第一个春天,晴朗的天气总是像甜美的冰激...
    阅读 475评论 0 0

友情链接更多精彩内容