定位模型
static自然模型
relative相对定位模型
absolute绝对定位模型
fixed固定定位模型
sticky磁铁定位模型

possition之static（默认的设置）(静态定位、常规定位、自然定位)

作用 使元素定位于 常规/自然流 中 （块、行垂直排列下去，行内水平从左到右）
特点 1、忽略top,bottom,left,right或者z-index声明
2、两个相邻的元素如果设置了外边距，那么最终外边距=两者外边距最大的
3、具有固定width和height值的元素，如果把左右外边距设置为auto,则左右外边距会自动扩大占满剩余宽度。造成的想过就是这个块水平居中

特点例子：1、

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>change-to-flex</title>

    <link rel="stylesheet" href="./reset.css">

    <style>

        .block {

        	/*这个先不管他*/

            position: relative;

            /*设置10像素的top值*/

            top:10px;

            width: 50px;

            height: 50px;

            line-height: 50px;

            text-align: center;

            border: 2px solid blue;

            box-sizing: border-box;

        }

        .block:nth-child(2){

        	/*static会使2框回归自然流，看效果*/

            position: static;

            border-color:red;

        }

    </style>

</head>

<body>

    <div class="block">

        1

    </div>

    <div class="block">

        2

    </div>

    <div class="block">

        3

    </div>

    <div class="block">

        4

    </div>

</body>

</html>


特点二：1和2之间的边距是2的外边距20，而不是1和2外边距之和。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>change-to-flex</title>

    <link rel="stylesheet" href="./reset.css">

    <style>

        .block {

            position: static;

            width: 50px;

            height: 50px;

            line-height: 50px;

            text-align: center;

            border: 2px solid blue;

            box-sizing: border-box;

        }

        .block:nth-child(1){

        	margin: 10px;

            border-color:red;

        }

        .block:nth-child(2){

        	margin: 20px;

            border-color:red;

        }

    </style>

</head>

<body>

    <div class="block">

        1

    </div>

    <div class="block">

        2

    </div>

    <div class="block">

        3

    </div>

    <div class="block">

        4

    </div>

</body>

</html>

特点三：
上例中改为

.block:nth-child(1){

        	margin: auto;

            border-color:red;

        }

position之relative相对定位（参照物）

作用 使元素成为containing-block 官方解释是可定位的祖先元素
特点 1、可以使用top/right/bottom/left/z-index进行相对定位 （相对于自己在常规流中的位置）
2、相对定位的元素不会离开常规流（原来常规流中的位置依然空置存在）
3、任何元素都可以设置为relative,他的绝对定位的后代都可以相对于他进行绝对定位–超好用（因为绝对定位是相对于父元素而言的）
4、可以使浮动元素发生偏移，并控制它们的堆叠顺序（浮动元素不能设置偏移即外边距等，但加上相对定位就可以了） 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position-relative</title>

    <link rel="stylesheet" href="./reset.css">

    <style>

		.parent {

			width:300px;

			height:300px;

			background: blue;

		}

		.parent div {

			width: 80px;

			height: 80px;

		}

        .sub-1 {

            /*相抵于原来自己在常规流中的定位*/

        	position:relative;

        	background: red;

        	top:20px;

        	left: 50px;

        }

        .sub-2 {

			background: green;

        }

    </style>

</head>

<body>

    <div class="parent">

    	<div class="sub-1"></div>

    	<div class="sub-2"></div>

    </div>

    <div class=""></div>

    di

</body>

</html>

position之absolute（绝对定位）

lrtb : left，right，top，bottom

作用 使元素脱离常规流
特点 1、脱离常规流
2、设置尺寸要注意：百分比比的是谁？——最近定位的祖先元素
3、lrtb如果设置为0 它将对其到最近定位祖先元素的各一边——衍生出一个居中妙计
4、lrtb如果设置成auto它将被打回原形恢复到常规流
5、如果没有最近定位祖先元素，会认body为父元素
6、z-index可以控制堆叠顺序

1、脱离常规流，原来的位置会被下面的元素占用
2、百分比，lrtb等都是相对于父元素而言的
3、如果设置lrtb为auto由第四点可知，会回到常规流，所以设置lrtb均为0，然后设置margin为auto，自然居中
4、。。。。
5、。。。。
6、设置堆叠顺序，属性仅在节点的 position 属性为 relative, absolute 或者
fixed 时生效.z-index 大的元素会覆盖 z-index 小的元素，即 z-index 越大优先级越高

position之fixed(固定定位)

作用 我跟绝对定位本是同根生
特点 1、和absolute的区别？相对于谁做绝对定位
2、固定定位元素不会随着视口的滚动而滚动
3继承absolute的所有特点

1、固定定位相对于视口（窗口、广告）
2、一直在窗口的同一个位置
3、。。。。

position之sticky(磁铁定位、粘性定位、吸附定位)——新的

作用 relative+fixed的完美结合，制造出吸附效果
特点 1、如果产生偏移原位置还是会在常规流中
2、如果他的最近祖先元素有滚动，那么它的偏移标尺就是最近的祖先元素
3、如果最近的祖先元素没有滚动那么它的偏移标尺是视口
4、上下左右【偏移规则】

CSS定位（慕课网学习笔记）的更多相关文章

  1. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  2. HTML基本语法（慕课网学习笔记）

    标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  3. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  4. CSS基本语法（慕课网学习笔记）

    CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...

  5. js之DOM入门（慕课网学习笔记）

    DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...

  6. Float浮动（慕课网学习笔记）

    float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...

  7. 【慕课网学习笔记】Java共享变量的可见性和原子性

    1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...

  8. js之window对象（慕课网学习笔记）

    javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...

  9. 初识javaScript(慕课网学习笔记)

    js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...

随机推荐

  1. Java基础00-方法10

    1. 方法概述 1.1 什么是方法 将好几串代码组成一个整体,这个整体就是方法. 2. 方法的定义和调用 2.1 方法定义 2.2 方法的调用 方法名()就可以调用方法 代码示例:必须在main方法中 ...

  2. 12Java进阶-IO与XML

    1.File File:java.io.File:代表一个实际的文件或目录. 常用构造方法File file = new File("path"); 其它构造方法: File(St ...

  3. 为了让她学画画——熬夜用canvas实现了一个画板

    前言 大家好,我是Fly, canvas真是个强大的东西,每天沉迷这个无法自拔, 可以做游戏,可以对图片处理,后面会给大家分享一篇,canvas实现两张图片找不同的功能, 听着是不是挺有意思的, 有点 ...

  4. HttpClient（七）

    一.定义 1.什么是HttpClient?在什么场景要用到HttpClient? http协议可以说是现在Internet上面最重要,使用最多的协议之一了,越来越多的java应用需要使用http协议来 ...

  5. GC垃圾回收机制详解

    JVM堆相关知识    为什么先说JVM堆?  JVM的堆是Java对象的活动空间,程序中的类的对象从中分配空间,其存储着正在运行着的应用程序用到的所有对象.这些对象的建立方式就是那些new一类的操作 ...

  6. Receiver class com.mchange.v2.c3p0.impl.NewProxyResultSet does not define or inherit an implementation of the resolved method 'abstract boolean isClosed()' of interface java.sql.ResultSet.

    背景: Mayabtis+springboot项目,连接数据库发生异常 报错内容: java.lang.AbstractMethodError: Receiver class com.mchange. ...

  7. 项目启动报错 The server time zone value '�й���׼ʱ��' is unrecognize...

    背景介绍: 把项目在新的电脑上运行,MySQL版本不同出现错误 错误: 报错The server time zone value '�й���׼ʱ��' is unrecognized or repr ...

  8. jenkens安装教程

    war包安装方式(linux和windows下) 具体参见:https://www.cnblogs.com/UncleYong/p/10742867.html

  9. 理清 UT、UTC、GMT和CST

    平时各种时间标准简写绕得不明不白,查一下整理在这里. IAT: International Atomic Time, 原子时.又称国际原子时,是一种通过原子钟得到的时间标准,原子钟是世界上已知最准确的 ...

  10. ifix 自动化（Automation）错误弹窗的解决方案

    在先前ifix项目中添加了语音模块,然后概率性跳出自动化(Automation)错误弹窗,先前分析了很多种原因,从代码的冗余,编码等角度进行了优化,效果不是很理想,仍然会概率性出现.经过反反复复大约3 ...