一、定位流

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. Stream系列（六）Match方法使用

    条件比配 视频讲解 https://www.bilibili.com/video/av77403655/ EmployeeTestCase.java package com.example.demo; ...

  2. Shell - 长 ping 脚本监控网络时延

    生产环境中, 网络时延是一个很重要的指标. 为了方便检查网络时延的大小, 我们可以通过ping命令实现长时间的网络监控. 1 ping 命令的使用 1.1 常用参数 -i: 每次执行ping操作的间隔 ...

  3. Nginx服务器部署 负载均衡 反向代理

    Nginx服务器部署负载均衡反向代理 LVS Nginx HAProxy的优缺点 三种负载均衡器的优缺点说明如下: LVS的优点: 1.抗负载能力强.工作在第4层仅作分发之用,没有流量的产生,这个特点 ...

  4. python网络爬虫之入门[一]

    目录 前言 一.探讨什么是python网络爬虫? 二.一个针对于网络传输的抓包工具fiddler 三.学习request模块来爬取第一个网页 * 扩展内容(爬取top250的网页) 后记 @(目录) ...

  5. Stream系列（十二） PartitioningBy方法使用

    分割列表 视频讲解: https://www.bilibili.com/video/av78106120/ EmployeeTestCase.java package com.example.demo ...

  6. mysql那些事(6) WHERE条件 字符串的引号

    前言:所谓的坑,两个意思,一个是软件本身的bug,一个是使用者常犯的错误. phper在日常开发中经常和mysql打交道.特别是在没有分层的中小应用中,phper开发要关注sql语句的实现. 入正题, ...

  7. jquery列表操作

    <span> <button>全选</button> <button>不选</button> <button>反选</bu ...

  8. matlab实现PSNR

    目录 1.PSNR原理 2.PSNR的matlab实现代码 3.针对彩色图像的PSNR的matlab代码 @ 1.PSNR原理 PSNR,峰值信噪比,通常用来评价一幅图像压缩后和原图像相比质量的好坏, ...

  9. 转:Java logger组件：slf4j, jcl, jul, log4j, logback, log4j2

    先说结论 建议优先使用logback 或 log4j2.log4j2 不建议和 slf4j 配合使用,因为格式转换会浪费性能. 名词:jcl 和 jul 标题中的 jcl 是 apache Jakar ...

  10. shell 数组作为函数形参

    问题描述: 把字符串tarFile和数组slaves_hostIP传入函数processArray中并输出结果. #!/bin/bash function processArray() { tarFi ...