day6 相对定位：position:relative
相对定位：position:relative
特点：a.相对于自己原来位置的定位，以自己的左上角为基准。
b.相对定位原来的位置仍然算位置，不会出现浮动现象。
以下为初始位置：（可以看出设置margin和position的区别）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
width: 100px;
margin: 50px;
background-color: pink;
/* position: relative;
top:100px;
bottom: 100px; */
}
/* .bottom {
height: 100px;
width: 120px;
background-color: yellow;
} */
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
width: 100px;
margin: 50px;
background-color: pink;
/* 设定相对位置 */
position: relative;
top:100px;
bottom: 100px;
}
/* .bottom {
height: 100px;
width: 120px;
background-color: yellow;
} */
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
设定相对定位之后的效果图：
top设置相对定位，bottom不设置定位：
初始状态如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
width: 100px;
background-color: pink;
/* 设定相对位置
position: relative;
top:100px;
bottom: 100px; */
}
.bottom {
height: 100px;
width: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
效果图如下：
设定了相对定位后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
width: 100px;
background-color: pink;
/* 设定相对位置 */
position: relative;
top:100px;
bottom: 100px;
}
.bottom {
height: 100px;
width: 120px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
效果图如下：
day6 相对定位：position:relative的更多相关文章
- 层模型--相对定位(position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left.right.top.bottom属性确定元素在正常文档流中的偏移位置.相对定位完成的过程 ...
- 相对定位position: relative;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- 解决td标签上的position:relative属性在各浏览器中的兼容性问题
在css中的position属性规定了页面元素的定位类型,它有以下几个值: absolute:绝对定位,相对于static以外的第一个父元素进行定位: fixed:生成绝对定位的元素,相对于浏览器窗口 ...
- css中position:relative的真正理解
其实话说一直以来也没真正去理解好position:relative的用法的真实意义. 我想很多人实实在在用的多都是position:relative和position:absolute结合起来一起用的 ...
- css position relative obsolution
层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...
- position relative
position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于 ...
随机推荐
- 高并发下载tomcat下的文件时，发生java.net.SocketException: Connection reset解决方案
(1)问题产生:使用500个线程并发下载tomcat工程中的一个文件时,服务器出现java.net.SocketException: Connection reset异常, 客户端出现connect ...
- 2018-12-14-恢复-U-盘隐藏文件夹
title author date CreateTime categories 恢复 U 盘隐藏文件夹 lindexi 2018-12-14 19:24:56 +0800 2018-12-14 19: ...
- H3C DHCP特点
- 机器学习——集成学习之Stacking
摘自: https://zhuanlan.zhihu.com/p/27689464 Stacking方法是指训练一个模型用于组合其他各个模型.首先我们先训练多个不同的模型,然后把之前训练的各个模型的输 ...
- NetBIOS 计算机名称命名限制
本文告诉大家对于 NetBIOS 的命名的限制 长度限制 最小长度是 1 最长长度是 15 因为默认是 16 字符,但是微软使用最后一个字符作为后缀 可以使用的字符 可以使用英文和数字 abcdefg ...
- Qt串行化的输入和输出（使用QDataStream读写QByteArray，对QIODevice直接起作用）
参考https://lug.ustc.edu.cn/sites/qtguide/ 今天看了一个介绍Qt串行化的介绍,感觉很受益,就记录了下来. 串行化(Serialization)是计算机科学中的一个 ...
- JMeter数据库测试计划
在系统上安装数据库服务器之后. 按着这些次序: 创建名为testdb的数据库. 创建表 - tb_user. 将记录插入到tb_user表中. 下图显示了创建的数据库及其记录. 注意:您需要将相应的J ...
- Delphi XE里的StrPas要注意哦（要让StrPas知道哪里是字符串结束）
废话不多说了,直接上例子解说: procedure TForm1.Button1Click(Sender: TObject);var aa: array[0..1]of AnsiChar; bb1 ...
- pg_dump
一.PostgreSQL提供的一个工具 pg_dump逻辑导出数据,生成sql文件或其他格式文件,pg_dump是一个客户端工具,可以远程或本地导出逻辑数据,恢复数据至导出时间点. 二.pg_dump ...
- 异常 A component named TableViewForm already exists 解决方法
用navicate连接mysql,打开数据库表格,出现 A component named TableViewForm already exists 异常信息,如下图: 1.异常原因: 打开的表格数 ...