定位属性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. Redis在CentOS和Windows安装过程

    redis是一种key-value高效的内存数据库. key-value是什么?json懂吧?字典懂吧?这些都是key-value结构的数据,每个key对应1个value. 那这个数据库和我们网站在使 ...

  2. Linux--奇思淫才

    根据进程号找到可执行的文件路径 [ec2-user@baolin ~]$ ll /proc/<pid>/exe lrwxrwxrwx 1 ec2-user ec2-user 0 May 3 ...

  3. java集成swagger

    概览: java集成Swagger Swagger-UI的使用 Springboot跨域请求的访问解决 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 W ...

  4. stm32位操作详解

    stm32位操作详解 STM32位操作原理 思想:把一个比特分成32位,每位都分配一个地址,这样就有32个地址,通过地址直接访问. 位操作基础 位运算 位运算的运算分量只能是整型或字符型数据,位运算把 ...

  5. 《团队作业第二周》五小福团队作业——UNO

    <团队作业第二周>五小福团队作业--UNO 一.修改完善上周提交的需求规格说明书 THE FIRST改变 首先:我们组的博客无小组分工及占比,这是第一个问题,当时我们在写博客的时候由于很多 ...

  6. 基于IPv6的数据包分析

    1.首先我们来构建拓扑:如下所示 2.对各个路由器进行配置使得网络ping通:命令如下 a)配置各路由器接口的IPv6地址,可由上图注释配置 b)配置各路由器的静态路由(此处举例R4) (global ...

  7. C - 树的统计Count - 树链剖分

    思路 :树剖模板,线段树维护即可. #include<bits/stdc++.h> using namespace std; #define MID int m = (l+r)/2 #de ...

  8. Oracle存储过程向Hadoop迁移中的问题及方案

    本文记录Oracle存储过程向Hadoop迁移中遇到的问题及响应的解决办法,作为初学者,文中内容有不妥之处欢迎指正, 1.不支持IN中的子查询,Solution,使用INNER JOIN将子查询操作添 ...

  9. Centos6.5升级openssh、OpenSSL和wget

    1.OpenSSL 1.1.查看版本 使用如下命令查看版本: openssl version 1.2.安装gcc依赖 yum -y install gcc gcc-c++ 1.3.安装配置 ./con ...

  10. Android源代码编译过程及指令

    编译Android源代码分为两种情况: 1. 完整编译源码: ./mk_aliphone.sh --> 完整编译脚本 --> 6735  输入对应的编号 --> userdebug ...