定位属性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. ios中safari无痕浏览模式下,localStorage的支持情况

    前言 前阶段,测试提了个bug,在苹果手机中无痕模式下,搜索按钮不好使,无法跳页,同时搜索历史也没有展示(用户搜索历史时使用localStorage存储). 正文 iOS上Sarfari在无痕模式下, ...

  2. 解决微信小程序Video 某些属性设置不起作用问题

    <video controls="{{false}}" autoplay="{{true}}"></video> 设置属性务必要使用{{ ...

  3. MySQL和B树的那些事

    一.零铺垫 在介绍B树之前,先来看另一棵神奇的树——二叉排序树(Binary Sort Tree),首先它是一棵树,“二叉”这个描述已经很明显了,就是树上的一根树枝开两个叉,于是递归下来就是二叉树了( ...

  4. Maya cmds pymel scriptJob() 和 undoInfo() 在回调中撤销(undo)

    Maya cmds pymel scriptJob() 和 undoInfo() 在回调中撤销(undo) def myEventFun(): cmds.undoInfo(stateWithoutFl ...

  5. 程序猿最浪漫的表白,肯定会得到你的她——Jason niu 原文来自GitHub,本人已部分修改

    程序猿最浪漫的表白,肯定会得到你的她——Jason niu    原文来自GitHub,主页本人已部分修改,感谢程序猿大神wuxia2001和hackerzhou的开源,感谢这两位大神! 视频结果展示 ...

  6. Java笔记(二十) 注解

    注解 一.内置注解 Java内置了一些常用注解: 1.@Override 该注解修饰一个方法,表示当前类重写了父类的该方法. 2.@Deprecated  该注解可以修饰类.方法.字段.参数等.表示对 ...

  7. mysql的event(事件)用法详解

    SELECT * FROM mysql.event;SET GLOBAL event_scheduler = 1; -- 开启定时器 0:off 1:on SHOW VARIABLES LIKE 'e ...

  8. 写一个带文本菜单的程序,菜单项如下 (1) 取五个数的和 (2) 取五个数的平均值 (X) 退出。

    问题: 写一个带文本菜单的程序,菜单项如下(1)    取五个数的和 (2)     取五个数的平均值(X)    退出. 由用户做一个选择, 然后执行相应的功能.当用户选择退出时程序结束. 实现: ...

  9. 运行make_datafiles的过程

    1. 第一个bug 运行 echo "Please tokenize this text." | java edu.stanford.nlp.process.PTBTokenize ...

  10. jmeter--001.介绍、下载与安装

    一.介绍 使用场景: -1.接口测试 -2.性能测试 .... 特点: -1.开源.轻量级.插件化 -2.适合自动化和持续集成 二.下载(Windows环境) 下载网址:http://jmeter.a ...