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. template指针小测试

    测试结论: 1 函数指针 -- 使用形参固定的一系列函数作为某个函数的形参 -- callback机制 2 模板指针 -- 使用形参可变的一系列函数作为某个函数的形参 -- 3 typename -- ...

  2. TransportFireWall

    1.shadow for python install on windows (1.) install python pip (2.) install openssl for windows (3.) ...

  3. layUI学习第一日:myeclipse中使用layUI

    第一步:下载layUI,网址:https://www.layui.com/ 第二步:查看layUI解压后的内容,和官网解释各个文件夹的内容 第三部:在myeclipse中新建一个web project ...

  4. Java HashMap用法

    为了做题用Java语法替代C++map的常用语法,记录一下,剖析原理以后再补上. 1.import java.util.HashMap;//导入; 2.HashMap<K, V> map= ...

  5. [Algorithm] 1290. Convert Binary Number in a Linked List to Integer

    Given head which is a reference node to a singly-linked list. The value of each node in the linked l ...

  6. [转]python中np.multiply()、np.dot()和星号(*)三种乘法运算的区别

    转自https://blog.csdn.net/zenghaitao0128/article/details/78715140 为了区分三种乘法运算的规则,具体分析如下: import numpy a ...

  7. H3C 12508 收集诊断信息

        案例:H3C 12508单板卡出现remove状态,需要配合研发收集诊断信息. (此文档只展示研发要求的诊断信息.) 总体:12500交换机返回三种文件----故障时诊断信息,主备单板的日志文 ...

  8. mysql 实现经纬度排序查找功能

    需求如下: 商品有多个门店,用户使用App时需要查找附近门店的商品,商品要进行去重分页. 思路: 1.确认mysql自带经纬度查询函数可以使用. 2.该需求需要利用分组排序,取每个商品最近门店的商品i ...

  9. Visual Studio 语法高亮插件推荐

    编辑器 GItHub:https://github.com/Art-Stea1th/Enhanced-Syntax-Highlighting Visual Studio Marketplace:htt ...

  10. nginx代理tcp请求

    1.概述 ngx_stream_core_module 这个module在nginx1.90后开始支持.开启nginx的tcp代理支持--with-stream=dynamic --with-stre ...