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. MongoDB介绍(一)

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功 ...

  2. 在线程内关闭thread handle,导致server crash

    很多年以前了,那时tester发现一个server crash,通过测试pager功能很多次,可以把server搞崩溃. 一般来说,能再现的bug都不难改,不过这次因为要跑很多次test,才能再现cr ...

  3. 大话OI

    本文将收录一切我认为对我十分有帮助的他人的博文以及我认为有价值的我自己的原创文章. 引言 有人说:程序=算法+数据结构,所以OI=程序=算法+数据结构. 在我看来,这句话的前半句是对的,但后半句则有本 ...

  4. 算法六Z自形变换

    将一个给定字符串根据给定的行数,以从上往下.从左到右进行 Z 字形排列. 比如输入字符串为 "LEETCODEISHIRING" 行数为 3 时,排列如下: L    C     ...

  5. FineUIPro v6.0.1 小版本更新!

    这次修正了 v6.0.0版本的几个问题,建议所有用户升级到此版本: +修正调用F.addMainTab时可能出现JS错误的问题(34484135,1450561644).    -仅在未调用F.ini ...

  6. windows上安装python2和python3虚拟环境

    一.windows上安装 1.安装python 分别安装了Python2和Python3 python3.7默认安装目录 C:\Users\Administrator\AppData\Local\Pr ...

  7. python-4-格式化输出

    前言 有些小伙伴在打印中乱码或者编码不对,在这里讲格式化输出前,先讲下编码.我们都知道目前主流使用就是utf-8编码. 一.编码简介 编码用来让计算机识别,当然我们都知道计算机只能识别01010101 ...

  8. IDEA设置方法参数列表类型自动提示

    默认情况下,IDEA的提示不够完全,可以通过以下设置,将提示功能打开的更完善. 效果如下面俩图所示

  9. RSyslog Windows Agent 安装配置

    下载地址:https://www.rsyslog.com/windows-agent/windows-agent-download/ 安装过程: 1.双击rsyslogwa安装包,开始进行安装 2.一 ...

  10. LeetCode 1291. Sequential Digits

    题目 class Solution { public: int ans[10005]; vector<int> sequentialDigits(int low, int high) { ...