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. Conda和Python的国内安装源

    Conda和Python的国内安装源 Windows系统: 更换python国内源的方法. 在"C:\Users[xxxx]\pip\pip.ini"文件中配置如下内容(没有则新建 ...

  2. java.net 基本测试

    java.net 基本测试 包 java.net java.net.ssl 类 java.net.URL 测试类 package com.mozq.boot.kuayu01.demo; import ...

  3. 树莓派开机主动发送自己的局域网ip/外网ip到你的微信

    开机时,树莓派主动发送自己的内网ip以及公网ip到你的微信上,这样就能方便地使用ssh或VNC. 操作步骤 下载目录下的 boot_getIP_send_Wechat.py 到你的 Raspberry ...

  4. LinkCutTree学习笔记

    LinkCutTree 学习笔记 参考来源 https://www.zybuluo.com/xzyxzy/note/1027479 https://www.cnblogs.com/zhoushuyu/ ...

  5. windows端口转发工具(LCX)

    端口转发(Port forwarding),有时被叫做隧道,是安全壳(SSH) 为网络安全通信使用的一种方法.端口转发是转发一个网络端口从一个网络节点到另一个网络节点的行为,其使一个外部用户从外部经过 ...

  6. Python之Flask框架项目Demo入门

    Python+Flask框架项目Demo入门 本例子用到了 Flask+蓝图+Flask-Login+SQLAlchemy+WTForms+PyMySQL相关架构 Flask Web框架介绍 Flas ...

  7. Python连载22-调试&单元测试

    一.调试技术 (1)调试流程​:单元测试->集成测试->交测试部 (2)分类:i.静态调试(说白了就是看代码,看看有没有错):ii.动态测试 1.pdb调试 ​相关连接:https://b ...

  8. 【mysql报错】MySQL5.7.27报错“[Warning] Using a password on the command line interface can be insecure.”

    MySQL5.7.27报错“[Warning] Using a password on the command line interface can be insecure.”在命令行使用密码不安全警 ...

  9. 五、Spring之自动装配

    Spring之自动装配 ​ Spring利用依赖注入(DI),完成对IOC容器中各个组件依赖关系的赋值. [1]@Autowired @Autowired 注解,它可以对类成员变量.方法及构造函数进行 ...

  10. CSS3实现文字描边的2种方法

    问题 最近遇到一个需求,需要实现文字的描边效果,如下图           解决方法一     首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke     该属性是一个复 ...