关于position的操作
1.position:relative
相较于正常位置的定位
<!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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
left: 50px;//第二个div块离左边窗口50px
top: 10px;//div2块相对于上面的div1块有
10px
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
left: 150px;
top: -150px;
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
left: 150px;//div2相对于div1距离左边有150px
top: -150px;//div2相对于div1距离上边有150px
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</div>
</body>
</html>
下图为代码结果：
2.position:absolute若滚动浏览器，则区块随之滚动
相对于浏览器窗口的左上角
<!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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: absolute;
left: 160px;//距离窗口左边160px
top: 150px;//距离窗口上边150px
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</div>
</body>
</html>
下图为代码结果：
3.position:fixed位移基于浏览器左上角，以这种方式定位，若滚动窗口这个区块不随之滚动
<!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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: fixed;
left: 160px;
top: 150px;
}
p{
font-size: 50px;
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</div>
<p>带我飞积极发挥好长度均带我飞积极发挥好长度均带
带我飞积极发挥好长度均带我飞积极发挥
带我飞积极发挥好长度均带我飞积极发挥好长度均
带我飞积极发挥好长度均带我飞积极发挥好长度均
带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发
挥好长度均带带我飞积极发挥好长度均我飞积极发挥好长度均带我飞积极发挥好带我飞积极发挥好长度均长度均带我飞
积极发挥好长度均带我飞积极发带我飞积极发挥好长度均挥好长度均带我飞积极发挥好长度均带我飞带我飞积极发挥好长
度均积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均带我飞积极发挥好长度均
带我飞积极发挥好长度均好长度均我飞积极发挥好长度均</p>
</body>
</html>
下图为代码结果：
4.position:static表示默认值
<!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>Document</title>
<style>
#div1{
width: 150px;
height: 150px;
background-color: red;
}
#div2{
width: 150px;
height: 150px;
background-color: yellow;
position: static;
}
</style>
</head>
<body>
<div id="div1">woshidiv1</div>
<div id="div2">woshidiv2</div> </body>
</html>
下图为代码结果：
5.position:auto由浏览器自己计算
关于position的操作的更多相关文章
- android操作通讯录的联系人
界面配置文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" and ...
- RecycleView 实现多布局
最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...
- XML数据 JSON数据 LitJSON 数据 的编写和解析 小结
用XML生成如下数据<?xml version="1.0"encoding="UTF-8"?><Transform name="My ...
- 条款3：尽可能地使用const
如下为const修饰的几种类型: char name[] = "benxintuzi"; char* p1 = name; // non-const ...
- 【原创】java NIO FileChannel 学习笔记 FileChannel 简介
java NIO 中FileChannel 的实现类是 FileChannelImpl,FileChannel本身是一个抽象类. 先介绍FileChannel File Channels 是线程安全 ...
- Java NIO之缓冲区
1.简介 Java NIO 相关类在 JDK 1.4 中被引入,用于提高 I/O 的效率.Java NIO 包含了很多东西,但核心的东西不外乎 Buffer.Channel 和 Selector.这其 ...
- Xapian的内存索引
关键字:xapian.内存索引 xapian除了提供用于生产环境的磁盘索引,也提供了内存索引(InMemoryDatabase).内存索引.我们可以通过观察内存索引的设计,来了解xapian的设计思路 ...
- 感悟优化——Netty对JDK缓冲区的内存池零拷贝改造
NIO中缓冲区是数据传输的基础,JDK通过ByteBuffer实现,Netty框架中并未采用JDK原生的ByteBuffer,而是构造了ByteBuf. ByteBuf对ByteBuffer做了大量的 ...
- android -------- Data Binding的使用 RecyclerView
今天来说说DataBinding在列表RecyclerView中的使用 列表绑定 App中经常用到列表展示,Data Binding在列表中一样可以扮演重要的作用,直接绑定数据和事件到每一个列表的it ...
随机推荐
- docker-compose安装xxl-job
docker能安装的docker-compose肯定就能安装,锻炼一下写yml的能力. 后面再具体写实际中的应用 [root@localhost mysql]# cat docker-compose. ...
- 分布式架构基石-TCP通信协议
为什么会有TCP/IP协议 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他们无法合作一样 ...
- Eclipse怎样对项目进行重命名？
当创建一个项目时,可能会随便命名一个项目名,如果想要项目名更有意义,或者为了方便后续项目的命名,怎么重命名项目名呢? 第一步在我们的电脑打开eclipse软件,找到需要重命名的项目,如下图所示: 第二 ...
- [BZOJ2427]:[HAOI2010]软件安装（塔尖+DP）
题目传送门 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用${W}_{i}$的磁盘空间,它的价值为${V}_{i}$.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件 ...
- Mybatis 中在xxx.mapper书写模糊查询
1.在mybatis中,书写sql,有时候会有一些不细心,如: <!-- 首页商品 关键字搜索--> <select id="getGoodsByLikeTitle&quo ...
- DjangoRESTFrameWork中的视图
DRF中的request 在Django REST Framework中内置的Request类扩展了Django中的Request类,实现了很多方便的功能--如请求数据解析和认证等. 比如,区别于Dj ...
- webpack配置之webpack.config.js文件配置
webpack配置之webpack.config.js文件配置 webpack.config.js webpack resolve 1.总是手动的输入webpack的输入输出文件路径,是一件非常繁琐 ...
- 技术文档翻译-------glove readme（1）
Package Contents To train your own GloVe vectors, first you tools. An example is included in demo.sh ...
- maven 插件的应用
在pom.xml里配置 以测试插件介绍为主 <build> <plugins> <plugin> <groupId>org.apache.maven.p ...
- OpenCV学习笔记(1)
一.读入图像 使用cv2.imread()读入图像,图像应该在此程序的工作路径,第二个参数是告诉函数应该如何读取这幅图片 cv2.IMREAD_COLOR:读入一副彩色图像.图像的透明度会被忽略,这是 ...