1.层定位概述:

z-index:前后叠加顺序

2.position属性:

3.fixed:

2.relative:

移动后:

static没有往上移动占据box1的位置。

3.absolute:

移动后:

static往上移,占据box1的位置。

4.relative:

box1相对于static 定位。

5.absolute:

初始位置:

absolute相对于absolute移动后:

移动后:

6.一般设计方式:

案例:

区别:

前端学习笔记--CSS布局--层定位的更多相关文章

  1. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  2. 前端学习笔记--CSS布局--文件流定位

    1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  4. 前端学习笔记--CSS布局--盒子模型

    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:

  5. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  6. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  7. HTML 学习笔记 CSS样式(定位)

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  8. 前端学习笔记--css案例

    要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...

  9. 前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...

随机推荐

  1. 浅谈DFS序

    浅谈DFS序 本篇随笔简要讲解一下信息学奥林匹克竞赛中有关树的DFS序的相关内容. DFS序的概念 先来上张图: 树的DFS序,简单来讲就是对树从根开始进行深搜,按搜到的时间顺序把所有节点打上时间戳. ...

  2. 44 dlib鼠标指定目标跟踪

    dlib提供了dlib.correlation_tracker()类用于跟踪目标.官方文档入口:http://dlib.net/python/index.html#dlib.correlation_t ...

  3. ESP8266 LUA脚本语言开发: 外设篇-GPIO中断检测

    https://nodemcu.readthedocs.io/en/master/modules/gpio/#gpiomode 测试引脚 GPIO0 gpio.mode(,gpio.INT) func ...

  4. hdu 6495 dp

    http://acm.hdu.edu.cn/showproblem.php?pid=6495 题意 有n个挑战(1e3),假如接受,在挑战之前体力x会变成min(x,\(b[i]\)),然后会减去a[ ...

  5. A1044 Shopping in Mars (25 分)

    一.技术总结 可以开始把每个数都直接相加当前这个位置的存放所有数之前相加的结果,这样就是递增的了,把i,j位置数相减就是他们之间数的和. 需要写一个函数用于查找之间的值,如果有就放返回大于等于这个数的 ...

  6. 洛谷P4015 运输问题 网络流24题

    看了下SPFA题解,一个一个太麻烦了,另一个写的很不清楚,而且注释都变成了"????"不知道怎么过的,于是自己来一发SPFA算法. Part 1.题意 M 个仓库,卖给 N 个商店 ...

  7. what is variable?

    what is variable? variable:pytorch中的变量,存储tensor,数值会不断变动 在 Torch 中的 Variable 就是一个存放会变化的值的地理位置. 里面的值会不 ...

  8. web.xml引入 xml (tomcat 7.0.52) 以上版本报错

    原文地址:https://blog.csdn.net/sdmxdzb/article/details/47728017?locationNum=11 今天在搞工作流,tomcat7.0.57 总是报错 ...

  9. flask 第一章

    1.安装flask 首先安装python的虚拟环境,每个环境之间的包并不会产生冲突 ,相当于一个单独的 小空间. 由于自己使用的是windows开发环境  所以安装虚拟包的命令如下 pip  inst ...

  10. consul实现kubernetes-1.15集群master的高可用访问实现

    1.准备consul环境,参考我之前的博客实现或参考consul的官网部署最新的consul. 2.本次测试使用的是kubernetes-1.15.0 3.初始化集群 1)准备初始化文件 contro ...