整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》一文中，讲解了CSS常用的几种定位方式。此篇博文主要讲解如何应用绝对定位实现完美布局，及应用注意事项。
在布局过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。
什么？使用绝对定位还要条件？
当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。
在讲这两个条件的之前，我们要先提一个概念——标准流。
标准流（normal flow），也被称为文档流，是指在不借助任何特殊的css排列规则元素。
排布规则
浮动和定位（absolute，fixed）会脱离标准流，也就是不受这套规则的约束。
标准流其实就是一个默认的排布规则。下面介绍一下标准流元素的一些排布规则：
input与img是行内元素，但是可以设置宽高；
标准流中上下相邻的两个元素的margin-bottom与margin-top会发生重叠情况。
看了上面的一些排布规则，大家是不是就了解什么叫标准流啦？
举个例子，就拿float来说，没有浮动的盒子是一个标准流，而浮动的盒子是一个非标准流 ，因为float更改了它默认的排布规则。
而我们要用到的绝对定位，则是对离自己最近的那个非标准流盒子而言的。 （对一个盒子使用了浮动，相对定位，或者绝对定位，那么这个盒子就变成了一个非标准流的盒子了。）
好了，接下来就该将使用绝对定位要满足的两个条件了。
当我们要使用绝对定位的时候，必须要有两个条件：
为什么要满足这两个条件呢？
因为绝对定位是以父元素为基准点，进行定位。如果没有父元素，或者父元素没有设置position:relative属性它就会以最近的非标准流盒子为基准点进行定位。
绝对定位会使当前元素脱离文档流，即变成了非标准流。这是什么意思呢？
其实，当它为标准流的时候，它默认在原位，当它脱离标准流的时候，他就浮动起来了，不再占据原来的位置了。
这时候你要是想定位，如果不给它的父元素设置为相对定位（即让父元素变为非标准流），或者它没有父元素，那么它就会以节点的顶部为基准定位，以它为基准定位。
如果我们满足了这两个条件，它就会以父元素为基准进行绝对定位。这样定位的话，会省去超多麻烦。
下面来看一下具体例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h3{
position:absolute;
left:50px;
top:50px;
color:#FFF;
}
.div_test{
width:500px;
height:200px;
background-color:#000;
}
.div_test2{
width:300px;
height:100px;
float:right;
background-color:blue;
//position:relative;//相对定位
}
</style>
</head>
<body>
<div class="div_test">
<div class="div_test2">
<h3>这是一个绝对定位了的标题</h3>
</div>
</div>
</body>
</html>上面的代码定义了一个大div，其中包含一个小div，小div中有一段用了绝对定位的话。按照我们的代码，我们是想要这段文字根据div_test2来定位的，但是运行一下，如图：
我们可以看到，这段文字根据节点顶部作为基准定位。这是因为它的父元素没有设置相对定位。
现在给它的父元素设置一下相对定位。
运行结果如下：
家应该都知道，网站的布局对一个网站来说至关重要， CSS 作为新手，要做好一个网站，CSS 这关肯定得先过，今天教大家 CSS 的定位（Position）~
position 属性指定了元素的定位类型。position 属性有如下五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right 影响。
示例代码
div.static {
position: static;
border: 3px solid #73AD21;
}
fixed 定位
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动：
示例代码
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。Fixed 定位使元素的位置与文档流无关，因此不占据空间。Fixed 定位的元素和其他元素重叠。
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移动相对定位的元素，但它原本所占的空间不会改变。
h2.pos_top
{
position:relative;
top:-50px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
h2
{
position:absolute;
left:100px;
top:150px;
}
absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。
sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
有什么疑问可以私信小编:"前端"
完成了页面的布局之后，我们需要让页面动起来，一般来说头部信息需要添加好几个才能完成要求的接口请求。
所以我们在之前的基础要进行键值对输入的新增功能。
由于技术的原因，删除的操作没写出来。
所以最终实现了类似如下图的内容：
新增
把加号移动到了之前的操作位置，下面显示的是序列ID。所以会有诸多不便，但是删除指定行的操作还是等后续能力上升后再补全好了。
下面来看一下新增部分的js代码$("#head_data_add").click(function () {
var tr = "<tr>" + '<td>' + flag + '</td>'
+ '<td><input type="text" placeholder="请输入请求键" style="border-radius: 5px"></td>'
+ '<td><input type="text" placeholder="请输入请求值" style="border-radius: 5px"></td>'
+ '<td><input type="text" placeholder="请输入注释" style="border-radius: 5px"></td>'
+ '</tr>';
$("#head_data").append(tr);
flag++;
});
虽然就这么简单的几行，但是由于根本没有系统的学习过js，所以写的很痛苦。
首先是定义了一个变量tr，它是通过字符串的拼接组合而成，可以看到和我们在html静态页面中写的列表的一行内容一样，唯一不同的是使用flag来指明了序号。因为第一行是固定的，所以定义flag的时候是从2开始。在每次操作的最后都会进行flag++的操作，完成计数+1。
html页面
从IDE左侧的标示可以看出修改的部分。这次为table增加了一个id为head_data
为图标增加了一个a标签，并且指向的连接是javascript：void(0)
使用javascript：void(0)点击后html页面不会有任何变化，如果使用#会刷新一次页面。并且为它增加了一个id为head_data_add。
使用id是为了更方便的在js代码中定位到对应元素。
通过几步简单的操作就完成了添加一行键值对输入行的操作了。
效果
下面数据部分同理。
效果
其他部分自行查看github上的代码吧～～
https://github.com/zx490336534/Zxapitest
欢迎关注我的公众号：zx94_11
*请认真填写需求信息，我们会在24小时内与您取得联系。
