定位属性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. JAVA中的栈和堆【转】

    原文链接 https://www.cnblogs.com/ibelieve618/p/6380328.html JAVA在程序运行时,在内存中划分5片空间进行数据的存储.分别是:1:寄存器.2:本地方 ...

  2. bzoj 3238

    后缀数组+单调栈的应用 首先我们研究一下这个表达式,可以发现前半部分与串的情况并没有关系,而只是跟串的长度有关,所以我们先把前半部分算出来: 于是我们只需计算出即可 那么可以发现,对于排名分别为i,j ...

  3. 用 zotero 管理文献和个人知识库

    这周开始用了一下 zotero. 这是一款非常好用的文献管理工具,但它更像是一个多功能的收藏夹,或者说是一个知识.笔记.文献的综合管理工具. 入门的时候搜到了阳志平老师的几个图文并茂的教程,这里也推荐 ...

  4. UIWebView的常用方法

    //webview导航栏类型enum UIWebViewNavigationType : Int { case LinkClicked case FormSubmitted case BackForw ...

  5. ECMAScript 6 字符串的扩展

    1.字符的Unicode表示法 ① JavaScript允许采用\uxxxx的形式来表示一个字符,其中xxxx表示字符的Unicode码点. 但是,这种表示方法有一个局限性,它的码点只能在\u0000 ...

  6. 2018-2019-1 20189201 《LInux内核原理与分析》第五周作业

    甜死人的图片 一.书本第四章知识总结[系统调用的三层机制(上)] 无参数系统调用 依次通过c语言和内嵌汇编的c语言实现time()函数中封装的系统调用. 用户态.内核态和中断 用户态:在低的执行级别下 ...

  7. 20172328 暑假作业 之 实现安卓小程序Enjoy-all

    20172328 暑假作业 之 实现安卓小程序Enjoy-all 项目介绍 项目名称: Enjoy - all 项目简介: 本项目基于Java语言和Anroid Studio软件,实现了简单的冒泡.屏 ...

  8. 使用 Java 将多个文件压缩成一个压缩文件

    使用 Java 将多个文件压缩成一个压缩文件 一.内容 ①使用 Java 将多个文件打包压缩成一个压缩文件: ②主要使用 java.io 下的类 二.源代码:ZipMultiFile.java pac ...

  9. 重温TCP

    先放张TCP头图片 一.TCP三次握手目的: 1.保证源主机确定目的主机在线,并可进行通信 2.让源主机检查它是否正在监听试图去连接的端口 3.允许源主机向接收者发送他的起始序列号,使得两主机可以将数 ...

  10. 潭州课堂25班:Ph201805201 tornado 项目 第五课 增加用户系统-用户中心(课堂笔记)

    tornado 相关说明 在 users 表中创建记录,做测试 在项目根目录下创建 test.py # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 2019/2/27 ...