定位属性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. Easyui datalist 使用记录

    仅简单记录下,资料相对比较少 官方给了一个很简单的例子,没啥用处,文档:http://www.jeasyui.com/documentation/datalist.php 学习要点: 1.追加行 $( ...

  2. day14 集合与函数

    数据类型和变量总结 字符串.数字.列表.元组.字典 可变:列表,字典 不可变:修改变量的值ID变,字符串,数字,元组 访问顺序: 直接访问:数字 顺序访问:字符串,列表,元组 映射:字典 存放元素个数 ...

  3. Linux 服务器运行健康状况监控利器 Spotlight on Unix 的安装与使用

    1.本文背景 1.1.Linux 服务器情况 # cat /etc/issueRed Hat Enterprise Linux Server release 6.1 (Santiago)Kernel ...

  4. JDK12----------java环境变量配置

    https://jingyan.baidu.com/article/e5c39bf511bb3939d6603370.html

  5. Kali Linux 更新源

    1.  Kali Linux更新源 更换更新源,命令行中执行一下命令 /etc/apt/sources.list 2 替换sources.list里面的内容 可以使用以下三个源(使用一个即可) #ka ...

  6. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  7. Codeforces 840C On the Bench dp

    On the Bench 两个数如果所有质因子的奇偶性相同则是同一个数,问题就变成了给你n个数, 相同数字不能相邻的方案数. dp[ i ][ j ]表示前 i 种数字已经处理完, 还有 j 个位置需 ...

  8. Laravel日常使用总结

    字段当做键值key 集合的keyBy()方法详情:戳这里 创建模型类和数据库迁移文件 php artisan make:model Post -m 创建控制器和基础的方法 php artisan ma ...

  9. 15,EasyNetQ-高级API

    EasyNetQ的使命是为基于RabbitMQ的消息传递提供最简单的API. 核心IBus接口有意避免公开AMQP概念,如交换,绑定和队列,而是实现基于消息类型的默认交换绑定队列拓扑. 对于某些场景, ...

  10. 爬虫——scrapy入门

    scrapy 安装scrapy pip install scrapy windows可能安装失败,需要先安装c++库或twisted,pip install twisted 创建项目 scrapy s ...