css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute
相对定位
相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响，并且定位后不会脱离文本流，会占据原来的位置。
接下来直接看代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d-tag{
/*将三个标签设置同一属性*/
width: 100px;
height: 100px;
}
#d1{
background-color: red;/*标签1设置红色*/
}
#d2{
background-color: yellow;/*标签2设置黄色*/
}
#d3{
background-color: blue;/*标签3设置蓝色*/
}
</style>
</head>
<body>
<!--三个div标签,从上到下依次设置成红黄蓝-->
<div id="d1" class="d-tag"></div>
<div id="d2" class="d-tag"></div>
<div id="d3" class="d-tag"></div>
</body>
</html>
运行结果：
接下来将黄色div标签设置成相对移动：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d-tag{
/*将三个标签设置同一属性*/
width: 100px;
height: 100px;
}
#d1{
background-color: red;/*标签1设置红色*/
}
#d2{
position: relative;
left: 100px;
background-color: yellow;/*标签2设置黄色*/
}
#d3{
background-color: blue;/*标签3设置蓝色*/
}
</style>
</head>
<body>
<!--三个div标签,从上到下依次设置成红黄蓝-->
<div id="d1" class="d-tag"></div>
<div id="d2" class="d-tag"></div>
<div id="d3" class="d-tag"></div>
</body>
</html>
可以看出黄色div标签相对于没加定位前的位置移动了100px，并且原来位置还是占据着文档流的位置，蓝色框并没有上移。
绝对定位
绝对定位是标签相对于父级标签的位置来定位并默认初始位置是未设置定位前的位置，如果父级标签没有设置定位，那么会一层层向上找到定位的标签，直到body，上面的例子因为三个标签都是同级的所以会根据body标签来定位，如果将黄色标签设置成绝对定位并左移动50px：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d-tag{
/*将三个标签设置同一属性*/
width: 100px;
height: 100px;
}
#d1{
background-color: red;/*标签1设置红色*/
}
#d2{
position: absolute;
left: 50px;
background-color: yellow;/*标签2设置黄色*/
}
#d3{
background-color: blue;/*标签3设置蓝色*/
}
</style>
</head>
<body>
<!--三个div标签,从上到下依次设置成红黄蓝-->
<div id="d1" class="d-tag"></div>
<div id="d2" class="d-tag"></div>
<div id="d3" class="d-tag"></div>
</body>
</html>
这说明黄色标签已经脱离了文档流，相对于蓝色标签来说黄色标签不存在，所以蓝色标签会上移，其实这是因为绝对定位带浮动效果。
绝对定位和相对定位结合使用
通常我们将绝对定位和相对定位结合使用，下面看个实例：
这是怎么做的的呢，其实这就用到了相对定位和绝对定位，下面演示：
1、创建1个div标签里面包含1个子div标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
/*设置父级div属性：*/
position: relative; /*设置成相对定位，这样会保留父级的文档流位置*/
width: 400px;
height: 100px;
line-height: 100px;
background-color: tomato;
text-align: center;
}
#d2{
/*设置成绝对定位，并设置成不显示，设置绝对定位的原因是会脱离文档流后面即是显示了也不会影响下面的标签*/
position: absolute;
top: 100px;
width: 400px;
height: 200px;
background-color: steelblue;
display: none;
}
#d1:hover #d2
{
display: block;
}
</style>
</head>
<body>
<div id="d1">
购物车
<div id="d2">内容</div>
</div>
</body>
</html>
css中绝对定位和相对定位详解的更多相关文章
- css中绝对定位和相对定位的区别
先说个技巧一般用:子绝父相,即相对定位是给父级的,绝对定位的时候是给子级的. 一:绝对定位 position: absolute;绝对定位:绝对定位是相对于元素最近的已定位的祖先元素(即是设置了绝对定 ...
- ie浏览器css中的行为expression详解
CSS中的行为——expression (ie only) 最近对CSS中的行为比较感兴趣,虽然是不符合标准的也只有ie才能识别,但是他确实给css的功能扩展了不少.下面是摘自互联网上的文字和例子,因 ...
- CSS中的背景用法详解
background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...
- css3笔记系列-3.css中的各种选择器详解，不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- CSS中Position 的用法详解。
记得一年前,到一家公司面试的时候,问我position有哪几个属性,我憋半天才回答出2个,大家估计都清楚,就是我们经常用到的2个(relative,absolute). 最近又用到了好多,深入研究了下 ...
- CSS中的盒子模型详解
很多人对盒子模型搞晕头了,下面通过一个简单的代码来分析盒子模型的结构! 为了方便方便观看!在第一个div中画了一个表格,并将其尺寸设置成与div内容大小一样!且设置body的margin和paddin ...
- Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
- CSS中属性position位置详解功能讲解与实例分析
position有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页制作时,没有指定 ...
- 关于css中的align-content属性详解
align-content 作用: 会设置自由盒内部各个项目在垂直方向排列方式. 条件:必须对父元素设置自由盒属性display:flex;,并且设置排列方式为横向排列flex-direction:r ...
随机推荐
- 深入浅出Tomcat/1- 来历和配置文件
背景 Tomcat是一个非常重要的Web Server,已经存在多年.尤其是最近几年,因为Spring MVC或是Spring Boot的盛行,Tomcat的地位越发重要,地位明显升级. 我相信很 ...
- 持续集成之单元测试篇——WWH(讲讲我们做单元测试的故事)
持续集成之单元测试篇--WWH(讲讲我们做单元测试的故事) 前言 临近上线的几天内非重大bug不敢进行发版修复,担心引起其它问题(摁下葫芦浮起瓢) 尽管我们如此小心,仍不能避免修改一些bug而引起更多 ...
- 卷积神经网络CNN的意义
一.选用卷积的原因 局部感知 简单来说,卷积核的大小一般小于输入图像的大小(如果等于则是全连接),因此卷积提取出的特征会更多地关注局部 —— 这很符合日常我们接触到的图像处理.而每个神经元其实没有必要 ...
- POST BOY : Restful API 调试工具
在使用asp.net webapi开发中,一般情况下会使用一些工具来模拟请求. 其中有一款chrome浏览器插件POST MAN比较不错. 但是由于国内google服务使用不稳定,所以我自己写了一个简 ...
- OO博客作业2：第5-7周作业总结
(1)从多线程的协同和同步控制方面,分析和总结自己三次作业来的设计策略及其变化. 第5次作业:多线程电梯 基本照搬了课件上“生产者-消费者”模型的设计策略,将InputHandler设计为生产者线程, ...
- 【转】ubuntu 双机热备
1.关于软件安装 sudo apt-get install libssl-dev sudo apt-get install openssl sudo apt-get install libpopt-d ...
- 实分析p78 两个解释
1. 是为了存在一个充分大的J,使得,当j大于J.会满足.x是满足能一致收敛到f(x)自变量取得集合,, 是为了允许有限个 前面的不成立,是对所有的k都成立,让k取很大,可以很小 2.是函数列收敛到f ...
- TCP 原理
一.分组交换网络 古老的电话通信,一根电缆,两个用户设备通信 计算机中的两个设备节点通信:分组网络 计算机网络采取分组交换技术,意思就是我有[一块数据]要发给对方,那我会把这[一块数据]分成N份[ ...
- CodeForces Round #529 Div.3
http://codeforces.com/contest/1095 A. Repeating Cipher #include <bits/stdc++.h> using namespac ...
- mysql_linux(centos7 mysql 5.7.19)
centos7 mysql 5.7.19安装 1.解压文件 [root@centos3 ~]# tar -zxvf mysql-5.7.19-linux-glibc2.12-x86_64.tar.g ...