css-position 定位

今天分享给新前端同事的基础知识总结,也算是自己的复习

position

属性值一共有4个

static :正常文档流 干嘛用呢... 实际应用中 可能写过某个公共样式定义了一个元素为定位,但是某一个地方的实际应用你需要一个正常的文档流 抛弃定位 那就用这个 给改过来

一个元素,只要用上下面的三个属性值,不管是内联元素 还是行内元素,直接会变成内联块,也就是相当于 display:inline-block

relative: 相对定位,相对于自己,挪一个位置,虽然也形成了一个层 但是原来的位置不变,有点霸道的意思,就是我可以到处飘 但是我原来的得给我留着 我不用别人也不能占用

absolute:绝对定位 ,它要是出现 必须有参照物,也就是他的 父节点 或者爷爷节点 或者祖宗节点上应该出现一个 相对定位 position:relative,要是没出现 参照物就是浏览器窗口

fixed:恒定位 这个最简单,就是以浏览器窗口作为参照物

1.position:relative;

解释说明1

2.position:absolute

***首先提醒 在遇到不规则排列时 尽量标准文档流处理 别一看见啥不好写 就定位,position比较耗性能


解释说明2

常用的配合使用技巧 (应该挺多,临时就想起这一种,其他可以自己补充)

(1)与margin配合,变相居中对齐

   html 提供的属性 只能实现 水平居中 不能实现多行垂直居中(现在有flex布局可以用,下面的就是个例子,兼容低版本浏览器 可以用)


解释说明3

3.position:fixed

最简单的一种 就是根据浏览器窗口作为参考,

前面说如果position:absolute 父节点如果没有参考物 最终也参考浏览器窗口

本质差别是 如果内容超过一屏幕 向下滚动式 position:absolute 会跟着滚动 position:fixed不会


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    不二先森zZ阅读 4,377评论 0 2
  • 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上。 为什么要用定位? 以上...
    Arvin_zhea阅读 761评论 0 1
  • 为什么要用定位? 那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟! 第一幅图, 小黄色块可以...
    王玉伟的伟阅读 1,697评论 0 1
  • position 定位属性,检索对象的定位方式; 一、语法:position:static /absolute/r...
    阿甘笔记阅读 463评论 0 0
  • 1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素有3个特征: 浮动元素会...
    饥人谷_Sim阅读 560评论 0 0