这是我学习课程css定位 position时做的笔记!

本节内容

  • html的三种布局方式
  • position可选参数
  • z-index
  • 盒子模型和定位的区别
  • 侧边栏导航跟随实例

html的三种布局方式

三种布局：标准流，浮动，定位

两大元素：块级元素（div,h1-6,table,ol,ul,li,p）,内联元素（a,span,img,input）

position可选参数

static（标准流中正常排列）

relative（相对定位）

absolute（绝对定位）

fixed（脱离正常的文档流，登录弹窗，内联广告，不受制于父元素）

inherit（继承父元素的position属性）

z-index

z-index大的元素会覆盖z-index小的元素

z-index为auto的元素不参与层级比较

z-index为负值，会被普通流中的层级覆盖

只作用于position为除static之外的定位属性

父元素层级的优势

盒子模型和定位的区别

盒子模型通过内外边距来实现移动，定位则通过位置来实现移动。

慕课网的登录界面的定位实例（有遮罩）

侧边栏导航跟随实例

一级栏目用div，二级栏目用ul和li，三级栏目用div

三级栏目用absolute定位在右边展开

二三级栏目一开始用display：none,然后用hover:display:block

《css定位 position》课程笔记的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  3. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  4. CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...

  5. css 定位position总结

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  6. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  7. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  8. css定位-position

    前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...

  9. CSS - 定位(position)，难点

    元素的定位属性主要包括定位模式和边偏移两部分. 1. 边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 l ...

随机推荐

  1. 利用java的反射，实现工厂创建对象

    public static Object getInstance(Class c){ Object obj = null; try { obj = c.newInstance(); } catch ( ...

  2. Zabbix实战-简易教程（8）--添加item

    一.术语 1.1 Item概念 Item是从主机里面获取的所有数据.通常情况下 item称为监控项,例如我们host加入了 zabbix 监控,我们需要监控它的内存.CPU信息,那么获取的CPU或内存 ...

  3. MySQL如何插入测试数据

    关于插入MySQL测试数据,这里介绍两种方法: 选择优先级(结合PHP生成测试数据 > 使用存储过程 ). 使用存储过程(建议测试数据小于1000条使用该方法) 具体代码如下: 创建表: mys ...

  4. 简单的ajax遮罩层（加载进度圈）cvi_busy_lib.js

    cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...

  5. [bzoj2843&&bzoj1180]极地旅行社 (lct)

    双倍经验双倍的幸福... 所以另一道是300大洋的世界T_T...虽然题目是一样的,不过2843数据范围小了一点... 都是lct基本操作 #include<cstdio> #includ ...

  6. [bzoj1914] [Usaco2010 OPen]Triangle Counting 数三角形

    跑去看了黄学长的题解.. 第一次听说级角排序= =因为一直见计算几何就跑= = 级角排序就是按 原点和点连起来的边 与x轴正半轴构成的角的角度 排序...排序完效果就是逆时针旋转地枚举每个点. 要求的 ...

  7. hdu_3003Pupu(快速幂)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3003 Pupu Time Limit: 2000/1000 MS (Java/Others)    M ...

  8. c++(循环单向链表)

    前面的博客中,我们曾经有一篇专门讲到单向链表的内容.那么今天讨论的链表和上次讨论的链表有什么不同呢?重点就在这个"循环"上面.有了循环,意味着我们可以从任何一个链表节点开始工作,可 ...

  9. 前端通信：SSE设计方案（二）--- 服务器推送技术的实践以及一些应用场景的demo（包括在线及时聊天系统以及线上缓存更新，代码热修复案例）

    距离上一篇博客,这篇文章的发布大概过了整整三个月.我也从饿了么度过了试用期,成为了正式员工.刚进来恰好遇到项目底层改造和迁移,将项目从angular全部迁移到vue上,所以适应这边的节奏和业务的开发任 ...

  10. Nginx实战之反向代理WebSocket的配置实例

    http://www.jb51.net/article/112183.htm 最近在工作中遇到一个需求,需要使用 nginx 反向代理websocket,经过查找一番资料,目前已经测试通过,所以这篇文 ...