HTML连载57-相对定位和绝对定位
一、定位流
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-相对定位和绝对定位的更多相关文章
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- css之position相对定位和绝对定位
一.position的四个值:static.relative.absolute.fixed. 绝对定位:absolute和fixed统称为绝对定位 相对定位:relative 默认值:static 二 ...
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
- CSS中的相对定位和绝对定位
1.元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相 ...
- 【HTML+CSS】浅谈：相对定位与绝对定位
相对定位和绝对定位 ·定位标签:position ·包括属性:relative(相对) absolute(绝对) 1.position:relative; 假设对一个元素进行相对定位.首先它将出如今 ...
- CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位
其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: ...
- 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖
今天上午学习了内联元素于与块元素的转换 个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline; 转换成块元素displ ...
- 微信小程序 - 相对定位和绝对定位 - 相对路径和绝对路径
微信小程序 - 相对定位和绝对定位 相对定位relative,绝对定位absolute 相对定位:元素是相对自身进行定位,参照物是自己. 绝对定位:元素是相对离它最近的一个父级元素进行定位. 相对定位 ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
随机推荐
- 各种优化方法总结比较(sgd/momentum/Nesterov/adagrad/adadelta)
前言 这里讨论的优化问题指的是,给定目标函数f(x),我们需要找到一组参数x,使得f(x)的值最小. 本文以下内容假设读者已经了解机器学习基本知识,和梯度下降的原理. Batch gradient d ...
- 当linux突然修改任何设置都没办法联网时的绝对有效解决办法
以下操作为重新启动虚拟网卡的相关配置,初始化并重启虚拟网卡,对目前的配置不会有任何影响 打开终端,依次输入以下内容:– sudo service network-manager stop– sudo ...
- 【开发工具 - Android Studio】之AndroidStudio使用笔记
一.关闭自动更新: 问题:刚刚安装Android Studio的童鞋可能会遇到这样一个问题:Android Studio在打开的时候一直在下载一些东西,浪费很多时间,而且最终大多都会显示下载失败等等, ...
- vCenter Server Appliance（VCSA ）6.7部署指南
目录 简介 环境准备 开始安装 第一阶段安装 第二阶段安装 使用 简介 早期的VCSA支持 SUSE 和 Windows,不太懂SUSE,也不想用Windows 而在2018年4月17日VCSA 6. ...
- Vsftp与PAM虚拟用户
使用yum 安装vsftp yum install vsftpd pam pam-* db4 db4-* 创建一个保存用户及密码的文件 cd /etc/vsftpd/ touch virtual_lo ...
- CSS文字，文本常用样式
CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...
- MariaDB和Apache安装
5月24日任务 课程内容: 11.6 MariaDB安装11.7/11.8/11.9 Apache安装扩展apache dso https://yq.aliyun.com/articles/6298a ...
- 第三章 学习Shader所需的数学基础（2）
目录 1.坐标空间 1.2 坐标空间的变换 @ 1.坐标空间 我们在以前渲染流水线中就接触了坐标空间的变换.例如,在学习顶点着色器流水线阶段时,我们说过,顶点着色器的最基本功能就是把模型的顶点坐标从模 ...
- Spring Boot SpringApplication启动类（一）
目录 目录 前言 1.起源 2.SpringApplication 准备阶段 2.1.推断 Web 应用类型 2.2.加载应用上下文初始器 ApplicationContextInitializer ...
- C# 中的委托和事件(一)
引言 委 托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 是太容易了,而没有 ...