定位属性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. Lua中的函数

    [前言] Lua中的函数和C++中的函数的含义是一致的,Lua中的函数格式如下: function MyFunc(param) -- Do something end 在调用函数时,也需要将对应的参数 ...

  2. JVM虚拟机

    一.JAVA虚拟机内存模型: 1.程序计数器:非常小的内存,用于存放下一条运行的指令: 每一个线程都必须有一个独立的程序计数器,用于记录下一条要运行的指令,是一块线程私有的内存空间,CPU时间切片 2 ...

  3. Mysql -- 数据类型(2)

    掌握char类型和varchar类型 掌握枚举类型和集合类型 字符类型 #官网:https://dev.mysql.com/doc/refman/5.7/en/char.html #注意:char和v ...

  4. Excel-VBA入门(1): 基础 / 变量 /for / if/ 调试

    (一) 启动VBA 打开excel ,选项-自定义功能区-开发工具, 在界面的开发工具下选择 宏安全:  勾选 启用所有 excel保存xlsm后缀的格式才可以用宏! 若启动VBA编辑器(以下简称VB ...

  5. 微信开发getLocation、openLocation等一些功能不起作用,但是走ready方法 closeWindow一些方法可以用

    1.检查wx.config,发现我在jsApiList也声明了这些方法,并且也走了ready回调 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客 ...

  6. ReSharper反编译C#类库

    经常会在使用C#类中的某个函数时想了解其中具体的代码,可是F12转到定义后只能看到函数简单的声明, 看不到方法体中的代码,这挺让人沮丧的.. 如下: F12进入后显示的是元数据, Equals函数只能 ...

  7. 从Github上将laravel项目拉到新开发环境

    1.从github上将项目拉到本地 默认主分支:git clone https://github.com/my-user-name/my-project  /home/vagrant/laravel/ ...

  8. GIT初始学习记录

    目录 GIT学习记录 配置github与gitlib两个账号 基本操作 git init:初始化仓库 git status:查看仓库状态 git add :向缓存区中添加文件 git commit 保 ...

  9. C#---ASP页面的下拉框模糊查询功能

    基础方法支持: 一. DataTable 转换成 Json 换句话说如何在ASP.NET将一个DataTable序列化为 Json数组,或者如何从一个DataTable返回一个Json字符串. 使用 ...

  10. [Error]Python虚拟环境报错 OSError: setuptools pip wheel failed with error code 2

    mkvirtualenv py35 python新建虚拟环境报错,setuptools pip wheel failed with error code 2 刚好昨天在CentOS安装的时候也总是报s ...