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. Vue v-if,v-else-if,v-else的使用

    v-else-if 要紧跟 v-if v-else要紧跟v-else-if 或 v-if 代码: <!doctype html> <html lang="en"& ...

  2. ORB-SLAM2 地图加载

    一.前面说了ORB-SLAM地图的保存部分,继续说地图如何加载,因为加载部分相比保存要稍微复杂一些,所以要多说一点. 二.ORB-SLAM2地图加载构成 首先同样是在头文件中声明加载函数,包含地图点和 ...

  3. 第02组 Beta冲刺(1/5)

    队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 初步任务分配 提交记录(全组共用) 接下来的计划 完善接口文档 还剩下哪些任务 学习软工的理论课 学习代码评估.测试 燃尽 ...

  4. Java 并发系列之十一:并发线程带来的风险

    1. 概述 在并发中有两种方式,一是多进程,二是多线程,但是线程相比进程花销更小且能共享资源. 线程带来的风险: 1. 安全性问题.错误的问题永不发生.竞态条件(顺序敏感). 2. 活跃性问题.正确的 ...

  5. [NewLife.XCode]实体工厂(拦截处理实体操作)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netcore,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和 ...

  6. HTML连载24-属性选择器(下)

    一.格式 标签[属性=值]:{属性:值:} 1.属性的取值是以什么开头的 attribute |= value(CSS2) attribute^=value(CSS3) 两者之间的区别:CSS2中只能 ...

  7. jenkins环境自动部署

    https://my.oschina.net/tonystark/blog/1920889 示例脚本: #!/bin/bash #export BUILD_ID=dontKillMe这一句很重要,这样 ...

  8. Window权限维持(七):安全支持提供者

    安全支持提供程序(SSP)是Windows API,用于扩展Windows身份验证机制.LSASS进程正在Windows启动期间加载安全支持提供程序DLL.这种行为使红队的攻击者可以删除一个任意的SS ...

  9. .NET工程师的书单

    短暂的假期里抽空整理了一份书单,以个人的见解这些应该是值得.NET工程师至少去看一遍的书籍.但所罗列的仅包括国内目前已出版的国外书籍的英文版,并不包含中文翻译及相关领域的中文书籍.这里没有任何歧视之意 ...

  10. IIS_CVE-2015-1635-HTTP.SYS远程执行代码漏洞复现

    CVE-2015-1635-HTTP.SYS远程执行代码漏洞复现 一.漏洞描述 远程执行代码漏洞存在于 HTTP 协议堆栈 (HTTP.sys) 中,当 HTTP.sys 未正确分析经特殊设计的 HT ...