1、static（静态定位）：

　　默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。

2、relative（相对定位）：

　　定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

　　通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级 。

        .static1{

            height:80px;

            background-color: red;

        }

        .relative{

            height:80px;

            position:relative;

            top:40px;

            left:40px;

            background-color: black;

        }

        .static2{

            height:80px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="static1"></div>

    <div class="relative"></div>

    <div class="static2"></div>

</body>

　　他是默认参照父级的原始点为原始点（父级不是必须设定position属性），无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。

　　无父级则以文本流的顺序在上一个元素的底部为原始点

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

　　定位为absolute的层脱离正常文档流，但与relative的区别是其在正常流中的位置不再存在。

　　这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

　　1，如果没有TRBL(top、right、bottom、left)，以父级的左上角，在没有父级的时候，参照浏览器左上角。

　　2，如果设定TRBL，并且父级没有设定position属性（position:static;不算设定了属性），那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

　　3，如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用。

    <style type="text/css">

        .static1{

            height:80px;

            background-color: red;

        }

        .father{

            height:100px;

            background-color: pink;

            position:relative;

            left:20px;

        }

        .relative{

            height:80px;

            width:80px;

            position:absolute;

            top:10px;

            left:10px;

            background-color: black;

        }

        .static2{

            height:80px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="static1"></div>

    <div class="father">

        <div class="relative"></div>

    </div>

    <div class="static2"></div>

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

　　1、如果没有TRBL(top、right、bottom、left)，默认参照父级的原始点为原始点（父级不是必须设定position属性）。

　　2、如果设定TRBL，相对于浏览器窗口进行定位。

    <style type="text/css">

        .static1{

            height:80px;

            background-color: red;

        }

        .father{

            height:100px;

            width:300px;

            background-color: pink;

            left:100px;

            top:100px;

        }

        .relative{

            height:80px;

            width:80px;

            position:fixed;

            left:20px;

            background-color: black;

        }

        .static2{

            height:80px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div class="static1"></div>

    <div class="father">

        <div class="relative"></div>

    </div>

    <div class="static2"></div>

z-index属性

z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属 性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。

CSS布局的四种定位方式的更多相关文章

  1. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  2. position的四种定位方式：static、fixed、relative、absolute

    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ...

  3. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  4. CSS三栏布局的四种方法

    总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...

  5. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  6. CSS系列，三栏布局的四种方法

    三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...

  7. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  8. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  9. CSS的4种定位方式比较

    CSS有四种定位(Positioning)方法:Static,Relative, Absolute和Fixed 元素flow, overlap 相对参照物: 能否用offset( top, left, ...

随机推荐

  1. Uva1639（概率期望/对数处理避免丢失精度）

    Uva1639 题意: 有两个盒子各有n个糖果(n<=200000),每天随机选择一个:选第一个盒子的概率是p(0 ≤ p ≤ 1),第二个盒子的概率为1-p,然后吃掉其中的一颗.直到有一天,随 ...

  2. 二、JVM之体系结构

    一.JVM的架构模型 Java编译器输入的指令流基本上是一种基于栈的指令集架构,另外一种指令集架构则是基于寄存器的指令集架构. 具体来说这两种架构之间的区别: 基于栈式架构的特点 设计和实现更简单,适 ...

  3. C# WinForm MessageBox.Show显示在窗体中间

    一.新建MessageBoxEx类,并添加以下代码. using System; using System.Windows.Forms; using System.Text; using System ...

  4. 2020.01.19【NOIP提高组】模拟比赛-1.水池,2.数字排序,3.球星,4.钻石交易 总结反思

    水池 比赛时 我最讨厌这种数学类题了,我首先想到了这几种情况,设\(jl[][]\)表示两点之间弧的距离,从F到G可以由 F->G F->B->A->G F->A-> ...

  5. Django---Django返回HTML文件

    前面我们简单的了解Django的一些工作原理,其中关于页面展示的内容,也全部都是视图(Views)返回的内容,那么我们也知道前端包括很多内容.如:HTML,CSS,JavaScript等以及各种插件, ...

  6. scikit-learn包学习笔记1

    dataset 在scikit-learn包自带的数据集,R包也自带数据集iris鸢尾花数据集,做训练集.特征较少. from sklearn import datasets # Import nec ...

  7. PAT (Advanced Level) Practice 1036 Boys vs Girls (25 分)

    This time you are asked to tell the difference between the lowest grade of all the male students and ...

  8. window服务session隔离

    在window服务中抓取窗体是做不到的,因为window系统的session隔离机制:如果想要调用外部程序,可以通过 创建代理进程 进行操作(通过非托管代码CreateProcessAsUser函数进 ...

  9. 【大道至简】NetCore3.1快速开发框架一：集成Swagger

    在上一章节中,我们创建了基本的框架结构:https://www.cnblogs.com/fuyu-blog/p/12217647.html 下面我们测试接口和集成Swagger接口文档 一.接口测试 ...

  10. 常用命令 在linux下

    1.拷贝某个目录及其下的所有的文件到另外一个目录 语法:cp -r <source directory name>/ <destination directory name>/ ...