定位属性position小结

1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位。相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置。

2.子元素为relative(相对的)时,不参考父元素的位置,子元素不会脱离文档流,子元素参考自身位置进行定位。

3.子元素为absolute(绝对的)时,当父元素为relative或absolute时,此时父元素有位置信息,子元素会脱离文档流,参考父元素的位置。当父元素为static时,子元素会脱离文档流,子元素参考body原点进行定位。

定位属性position的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  3. 前端~定位属性position(relative、absolute、fixed)的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

  4. CSS学习笔记:定位属性position

    目录 一.定位属性简介 二.各属性值的具体功能 1. relative 2. absolute 3. fixed 三.三种定位属性的效果总结 参考资料:https://www.bilibili.com ...

  5. CSS - 定位属性position使用详解(static、relative、fixed、absolute)

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  6. css 定位属性position的使用方法实例-----一个层叠窗口

    运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style ty ...

  7. 关于CSS定位属性 position 的使用

    CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...

  8. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  9. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

随机推荐

  1. 帆软报表(finereport)单元格中各颜色标识的含义

    帆软报表(finereport)单元格中,可根据单元格角标的颜色判断单元格进行的操作 过滤:单元格左下角黄色三角形 条件属性:单元格左上角红色三角形.  控件:单元格右侧中间的各种矩形.  左父格:单 ...

  2. 【原创】大数据基础之Spark(4)RDD原理及代码解析

    一 简介 spark核心是RDD,官方文档地址:https://spark.apache.org/docs/latest/rdd-programming-guide.html#resilient-di ...

  3. 【原创】大叔问题定位分享(6)Dubbo monitor服务iowait高,负载高

    一 问题 Dubbo monitor所在服务器状态异常,iowait一直很高,load也一直很高,监控如下: iowait如图: load如图: 二 分析 通过iotop命令可以查看当前系统中磁盘io ...

  4. 第一章:OEL6.8之虚拟机安装

    一.在   Windows 上安装  VMware Workstation 具体安装请参考<VMware Workstation 15 Pro 永久激活密钥 下载> 二.创建虚拟机 1:选 ...

  5. theos安装详解

    1.安装 Homebrew  安装命令官方网站  https://brew.sh 2.利用 

  6. kvm虚拟化2-qemu-kvm

    Kvm  只支持x86 64的硬件虚拟化    要求cpu必须支持硬件虚拟化 HVM Kvm两个组件: 1 kvm.ko模块装入后为/dev/kvm 工作为hypervisor ,在用户空间通过系统调 ...

  7. vs2019离线安装包下载

    https://docs.microsoft.com/en-us/visualstudio/install/use-command-line-parameters-to-install-visual- ...

  8. NumPy的思考……

    问题: 为什么第一次输出矩阵形式的数据,第二次输出list形式的数据? 详见代码: a = np.array([[1, 2], [3, 4]]) print(a) print('ndim :', a. ...

  9. python经典书籍推荐:python编码规范

    目录INF-qa Python 编码规范................................................................................ ...

  10. eclipse安装Spring的具体步骤

    1.下载spring 官网下载需要jar包放在lib中 本人分享百度云jar 链接:https://pan.baidu.com/s/1iEMwBbTTCxuCNOEdprlGhg 提取码:e7tg 2 ...