定位属性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. C++设计模式——适配器模式

    生活中的适配器 买笔记本电脑,买手机时,都有一个电源适配器,电源适配器又叫外置电源,是小型便携式电子设备及电子电器的供电电压变换设备,常见于手机,笔记本电脑上.它的作用是将家里的220V高电压转换成这 ...

  2. Beta冲刺(3/7)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:beta冲刺(3/7) 团队部分 后敬甲(组长) 过去两天完成了哪些任务 整理博客 ppt模板 接下来的计划 做好机动. ...

  3. python学习第25天

    异常处理 什么是异常?什么是错误? 1,程序中难免出现错误. 错误主要分为两种: 1,语法错误 语法错误是根本上的错误,无法通过PYTHON解释器.完全无法执行,是在程序中不应该出现的错误.无法进行异 ...

  4. Vue中的template标签的使用和在template标签上使用v-for

    我们知道  .vue 文件的基本结构是: <template> ........ </template> <script> export default { nam ...

  5. ReSharper反编译C#类库

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

  6. mysql根据分组和条件查询以后如何统计记录的条数

    1.子查询,查询出的数据随便起一个别名,然后根据分组和条件查询出的数据,作为一个具有一列的一个表,然后外面的查询查询这个数据表的这一列的总数,即可. SELECT COUNT( * ) FROM ( ...

  7. 关于 永恒之蓝 和 MS17-010 补丁

    [KB4012598]:http://www.catalog.update.microsoft.com/Search.aspx?q=KB4012598 适用于Windows XP 32位/64位/嵌入 ...

  8. oracle导入.dmp文件

    在日常开发中,经常需要往一个数据库里导入.dmp文件,下面简单介绍下如何通过命令导入 1.创建一个awsbpm用户create user 用户名 identified by 密码; 如:create ...

  9. RxJS操作符(二)

    一.Observable的性质 三种状态:nex, error, complete 进入到Error状态: ) .filter(val=>{ throw '出错了' }) .take() .re ...

  10. json,HTTP协议

    JSON 语法规则 JSON 语法是 JavaScript 对象表示语法的子集. 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 JSON 对象 JSON 对象使用在大括号({}) ...