15、定位（Position）_青叶的全栈之路的博客-程序员秘密
定位（Position）
- 相关概念
- 定位组成
- 使用
一、相关概念
1.1、什么是定位？
定位：将一个元素定在某一个位置（坐标）。
1.2、为什么要使用定位？
- 定位可以让多个块级元素在一行显示
- 定位可以让一个元素在某一个盒子内固定在任意位置，且可以覆盖其它元素。
二、定位组成
定位由两个基本元素组成：定位模式（position）和边偏移（top、right、bottom、left），其中定位模式决定了元素在文档中的定位方式，而边偏移则决定了元素的最终位置（坐标）
2.1、定位模式（position）
- static：静态定位（默认），即没有定位的意思，元素遵循标准流的摆放特性。且没有边偏移
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
2.2、边偏移（top、right、bottom、left）
- top：顶端偏移量，即元素距离其父元素上边线的距离
- left：左侧偏移量， 即元素距离其父元素左边线的距离
- bottom：底部偏移量， 即元素距离其父元素下边线的距离
- right：右侧偏移量， 即元素距离其父元素右边线的距离
三、使用
3.1、相对定位（relative）
- 元素相对于其原先位置移动（参照点是自身原先的位置）
- 元素移动后，其原先在标准流中的位置继续保留，后面的元素仍以标准流的方式对待它（不脱标）
<body>
<hr/>
<div id="div1">第一个盒子</div>
<div id="div2">第二个盒子</div>
</body>
#div1{
width:200px;
height: 100px;
background-color: hotpink;
position:relative;/*相对定位*/
left: 100px;
top: 50px;
}
#div2{
width:200px;
height: 100px;
background-color: green;
}
3.2、绝对定位（absolute）
- 元素是相对于其父元素（有定位的父级元素）来移动位置的。（参照点是父元素）
- 如果元素没有父元素或父元素没有定位（position：static），则相对于浏览器来定位。
- 绝对定位不再占有原先标准流中的位置（脱标）
<body>
<hr/><!--会影响红盒子的位置，不会影响绿盒子的位置-->
<div id="outer1">
<div>红盒子</div>
绝对定位会脱离标准流<br/>
不再占有原先标准流中的位置
</div>
<div id="outer2">绿盒子</div>
</body>
#outer1{
position:relative;/*相对定位*/
}
#outer1>div{
/*红色盒子*/
width:200px;
height: 100px;
background-color: hotpink;
position:absolute;/*绝对定位*/
left:50px;
top:50px;
}
#outer2{
/*绿色盒子*/
width:200px;
height: 100px;
background-color: green;
position:absolute;/*绝对定位*/
left:100px;
top:100px;
}
3.3、固定定位（fixed）
- 以浏览器的可视窗口作为参照点移动元素。不受父元素和滚动条的影响
- 固定定位是脱离标准流的，不再占有原先标准流中的位置。
<body>
<div>TOP↑</div>
<p>固定定位会脱离标准流</p>
</body>
body>div{
width: 100px;
height: 200px;
background-color: hotpink;
text-align: center;
position:fixed;/*固定定位*/
left: 100px;
top:100px;
}
3.4、定位的叠放次序（z-index）
在使用定位布局时，不可避免的会碰到盒子重叠的情况。为了控制盒子的叠放顺序，可以使用z-index属性来控制。
- 数值可以是正整数、负整数、0。默认是auto。数值越大，盒子越靠上
- 如果属性值相同，则根据元素在HTML文档中的位置，后来者居上
<body>
<div id="div1">顶部盒子</div>
<div id="div2">中间盒子</div>
<div id="div3">底部盒子</div>
</body>
#div1{
width:100px;
height: 80px;
background-color: blue;
text-align: right;
position:absolute;/*默认left:0 top:0*/
z-index: 3;
}
#div2{
width:200px;
height: 140px;
background-color: green;
text-align: right;
position:absolute;/*默认left:0 top:0*/
z-index: 2;
}
#div3{
width:300px;
height: 200px;
background-color: hotpink;
text-align: right;
position:absolute;/*默认left:0 top:0*/
z-index: 1;
}
四、小技巧
4.1、绝对定位的盒子水平居中
- 在绝对定位中使用
margin:0 auto是没办法实现水平居中的
<body>
<div id="outer">
<div>水平居中</div>
</div>
</body>
#outer{
width:400px;
height: 300px;
border:2px solid black;
position:relative;
}
#outer>div{
margin-left: -40px;/*小盒子宽度的一半*/
width: 80px;
height: 60px;
background-color: hotpink;
position:absolute;
left:50%;
bottom:0;
}
4.2、固定到版心右侧
- positon：fixed
- left：50%
- top：随意
- margin-left：版心宽度一半
代码（略）
智能推荐
mysql数据库版本列表_获取MySQL数据库和版本列表？_weixin_39697660的博客-程序员秘密
要获取MySQL数据库列表，以下是语法-showdatabases;要获取服务器版本，可以使用以下语法-selectversion();让我们实现上述语法以获取MySQL数据库和版本的列表-mysql>showdatabases;这将产生以下显示所有数据库的输出-+---------------------------+|Database|+--...
unityRX 练习_unity的rx_董董女友的博客-程序员秘密
当鼠标按下时，do something void Start() { Observable.EveryUpdate() //开启update事件监听 .Where(_ =&gt; Input.GetMouseButtonDown(0)) //进行一个判断 .First() //只获取第一次的点击...
apache jmeter_apache jmetercsdn_晨风灿的博客-程序员秘密
下载地址http://jmeter.apache.org/download_jmeter.cgiJmeter这里不分windows环境还是linux环境，这个版本都可以。解压解压缩到任意文件夹都行，双击解压后文件bin目录下的jmeter.bat，就可以启动jmeter了。设置永久默认汉化在Jmeter的安装目录下的bin目录中找到 jmeter.properties这个文件，用文本编辑器打开。在#language=en下面插入一行language=zh_CN这样，再次打开Jmeter就
H.264标准入门必读_cmsbupt的博客-程序员秘密
本人从本科四年级上学期开始接触H.264标准，在实验室师兄的指导下开始学习视频编码，后面是我将自己近2年的学习历程进行回忆和整理，梳理一下。1、资料搜索 1.1 google 1.2 ITU-T 官网 2、必读资料 2.1 H.264标准文档 2.2 overview of 2.3 whitepaper of 2.
Fielddata is disabled on text fields by default. Set fielddata=true on [user] in order to load field_王树民的博客-程序员秘密
Fielddata is disabled on text fields by default. Set fielddata=true on [gender] in order to load fielddata in memory by uninverting the inverted index. Note that this can however use significant memor...
JAVA语言程序设计 第十六章 （16.10、16.11、16.12、16.13、16.14、16.15、16.16）_成_蹉_跎的博客-程序员秘密
程序小白，希望和大家多交流，共同学习 16.10//显示文本import javafx.application.Application;import javafx.stage.Stage;import javafx.scene.Scene;import javafx.scene.control.TextField;import javafx.scene.con...
随便推点
常用的数据库备份方式（完全备份、差异备份、增量备份）_数据库备份的三种方法_ITManCaogh的博客-程序员秘密
2011年下半年系统架构设计师考试上午真题试题（综合知识）数据备份是信息系统运行管理时保护数据的重要措施。（）可针对上次任何一种备份进行，将上次备份后所有发生变化的数据进行备份，并将备份后的数据进行标记。...
minicom无法输入问题的解决办法_AndyCheng_hgcc的博客-程序员秘密
好久没有使用minicom了，之前使用较多的时候还是四年前在致象科技开发嵌入式系统的时候。今天突然需要通过串口进行命令行操作，果断选取minicom进行操作了。突然发现不认识minicom了，岁月果然可以抹掉人的技能记忆，不管某个时间点是多么的娴熟。基本操作会在本文后续进行回顾，现在回顾本文正题。一顿技能回顾之后，终于可以在终端上看到刷刷十分流畅的系统开机log了，多么熟悉的画面，...
java自动填写网页表单，Java开发者必看_java网页自动填写_普通网友的博客-程序员秘密
前言很多Java程序员一直希望找到一份完整的学习路径，但是市面上很多书都是专注某一个领域的，没有一份完整的大图，以至于很多程序员很迷茫，不知道自己到底应该从哪里开始学，或者不知道自己学习些什么。好在，很早之前就有一位阿里巴巴的技术专家总结了一份**《Java工程师成神之路》**，作者按照自己的经验总结了从基础，到高级、底层、架构、进阶、扩展等6个大的章节。几乎囊括了Java体系内的所有知识点。这份资料之前开源在GitHub上，短短几个月时间，收获了15k+的Star数，最近，笔者了解到，该项目有了重大
双币对冲套利-EA （最新版优化）_2358587193的博客-程序员秘密
双币对冲最新优化版-EA是一款与行情不相关联的低风险智能对冲交易系统。几乎可以适用任何货币对和商品（黄金），充分实现了与行情无关，不必担心行情是震荡还是趋势。当两个货币的涨跌速度出现差异时即可实现盈利。这款策略不仅仅实现交易盈利，还可以赚钱市场的隔夜利息。交易是一场等待的游戏，耐心是一项重要的技巧只要保住本金去享受盈利，哪怕是非常缓慢的盈利，低微的盈利最终也将成为市场当中的佼佼者，这就是时间的力量，对冲的力量。投资最重要的，不要贪图快，一定要以本金安全为第一。这样该EA的盈利点实现了多样化。由于风险
android:scheme 通过uri跳转到APP应用指定Activity_scheme uri_Alex老夫子的博客-程序员秘密
最近公司有个需求，点击第三方APP或者APP内的H5页面然后直接跳转到APP里面，比如浏览器打开一个H5页面，然后点击某个链接就直接到APP的某个指定的Activity，经过研究发现实现还是蛮easy的，下面说下方法吧。首先，在AndroidManifest.xml里面进行配置，在对应的Activity加上一个intent-filter, 如下： &lt;application ...
JAVA并发-ScheduledExecutorService_运动员写代码的博客-程序员秘密
java.util.concurrent.ScheduledExecutorService是一个可以安排任务延迟执行的ExecutorService, 或者以固定的时间间隔重复执行。任务通过一个工作线程异步执行，而不是提交任务到ScheduledExecutorService的线程。ScheduledExecutorService例子下面是ScheduledExecutorService例子:ScheduledExecutorService scheduledExecutorServic..