一、定位流

1.分类

（1）相对定位；

（2）绝对定位

（3）固定定位

（4）静态定位

2.什么相对定位

相对定位就是相对于自己以前在标准流中的位置来移动。

例子：

 <style>

        div{

            width:100px;

            height:100px;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: yellow;

        }

        .box3{

            background-color: blue;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

</body>

现在修改box2的属性

        .box2{

            background-color: yellow;

            position:relative;/*相对流不会脱离标准流*/

            top:20px;

            left:20px;

        }

3.注意：

（1）相对流不会脱离标准流

（2）在相对定位中同一个方向上的定位属性只能使用一个

（3）由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素

（4）由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响到标准流的布局。（也就是设置了margin/padding属性的时候，会把原来标准流中的位置进行相应调整，而相对位置会等标准流设置好了再进行生效）

（5）position:relative;经常忘记设置。

        .box2{

            background-color: yellow;

            position:relative;/*相对流不会脱离标准流*/

            top:20px;

            left:20px;

            margin-top: 20px;

        }

4.相对定位的应用场景

（1）用于对元素进行微调，比如：各种标签一起使用的时候，由于标签的差异，需要进行对齐，使用相对定位会更加简便。

（2）配合后面学习的绝对定位进行使用

二、绝对定位

1.什么是绝对定位

绝对定位就是相对于body​来定位的。​

先来一个基础的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D150_AbsolutePositoning</title>

    <style>

        div{

            width:100px;

            height:100px;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: yellow;

            /*position:absolute;*/

        }

        .box3{

            background-color: blue;

        }

        span{

            width:100px;

            height:100px;

            background-color: purple;

        }

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<span>我是行内块级元素在绝对定位中的作用的</span>

</body>

</html>

2.绝对定位注意点

（1）绝对定位的元素是脱离标准流的

        .box2{

            background-color: yellow;

            position:absolute;

        }

（2）绝对定位的元素是不区分块级元素/​行内元素/行内块级元素的。

        span{

            width:100px;

            height:100px;

            background-color: purple;

            position:absolute;

        }

（3）这个绝对定位优点类似于浮动流

        .box2{

            background-color: yellow;

            position:absolute;

            right:0px;

            bottom:0px;

三、源码：

D148_RelativePositioning.html

D150_AbsolutePositoning.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D148_RelativePositioning.html

https://github.com/ruigege66/HTML_learning/blob/master/D150_AbsolutePositoning.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

HTML连载57-相对定位和绝对定位的更多相关文章

  1. 详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

  2. css之position相对定位和绝对定位

    一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...

  3. CSS中相对定位与绝对定位

    看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...

  4. CSS中的相对定位和绝对定位

    1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...

  5. 【HTML+CSS】浅谈：相对定位与绝对定位

    相对定位和绝对定位 ·定位标签:position  ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今 ...

  6. CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

    其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...

  7. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  8. 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径

    微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...

  9. css position相对定位与绝对定位彻底搞懂

    定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...

  10. Web—12-详解CSS的相对定位和绝对定位

    CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...

随机推荐

  1. Java多线程编程(5)--线程间通信

    一.等待与通知   某些情况下,程序要执行的操作需要满足一定的条件(下文统一将其称之为保护条件)才能执行.在单线程编程中,我们可以使用轮询的方式来实现,即频繁地判断是否满足保护条件,若不满足则继续判断 ...

  2. Electron存储简单数据和用户首选项推荐用electron-store

    electron-store1可以用来保存Electron应用程序或模块的简单数据持久性-保存和加载用户首选项,应用程序状态,缓存等. 1https://github.com/sindresorhus ...

  3. 附012.Kubeadm部署高可用Kubernetes

    一 kubeadm介绍 1.1 概述 参考<附003.Kubeadm部署Kubernetes>. 1.2 kubeadm功能 参考<附003.Kubeadm部署Kubernetes& ...

  4. 【Android - 自定义View】之自定义九宫格手势解锁控件

    首先来介绍一下这个自定义View: (1)这个自定义View的名称叫做 LockView ,继承自View类: (2)这个自定义View实现了应用中常见的九宫格手势解锁功能,可以用于保证应用安全: ( ...

  5. shell特殊符号及cut、sort_wc_uniq、tee_tr_split命令 使用介绍

    第6周第2次课(4月24日) 课程内容: 8.10 shell特殊符号cut命令8.11 sort_wc_uniq命令8.12 tee_tr_split命令8.13 shell特殊符号下 扩展1. s ...

  6. C语言l博客作业06

    C语言l博客作业06 问题 回答 这个作业属于哪个课程 C语言程序设计ll 这个作业的要求在哪里 https://edu.cnblogs.com/campus/zswxy/SE2019-2/homew ...

  7. hybrid app初体验，和react-native一起飞

    第一次启动了react-native的示例,今天主要把其中遇到的坑与解决的办法分享给大家.如有疏漏.错误还望指正. 首先还是要从hybrid app这个概念说起(如果对于这个过程不感兴趣的同学,可以直 ...

  8. 不使用cookie记录用户信息

    cookie是什么: cookie是由web服务器保存在用户浏览器(客户端)上的小文件,它可以包含用户信息,用户操作信息等等,无论何时访问服务器,只要同源,就能携带到服务端 常见方式 一般:请求一个接 ...

  9. MySQL 8.0新增特性详解【华为云技术分享】

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...

  10. Flask开发天气查询软件，带你掌握pipenv的使用与手机Termux下的部署

    关于pipenv 昨天介绍了pipenv这个相比于virtualenv更高端大气上档次的虚拟环境管理软件,但看了下流量貌似不是很受欢迎,也许是我介绍的不够好吧.那么今天就拿它做一个例子,开发一款天气预 ...