您的位置：首页 > Web前端

从零开始前端学习[19]:前端中重要的属性，定位position属性

2017-09-23 14:53 591 查看

前端中重要的属性，定位position属性

关于定位

固定定位fixed

相对定位relative

绝对定位absolute

层级关系z-index

使用定位来完成居中效果

提示：

博主：章飞_906285288

博客地址:http://blog.csdn.net/qq_29924041

关于定位fixed

定位也就是元素相对于其正常出现的位置，或者是相对于父级应该出现的位置，甚至相对于浏览器窗口本身出现的内容；

无论是块级元素还是行级元素，或是什么类型的标签,只要定位以后(relative除外)，都可以支持宽高

定位的相关属性:

属性属性值
positionfixed/relative/absolute
leftpx / %
rightpx / %
toppx / %
bottompx / %

固定定位position:fixed

固定定位fixed:相对于我们的可视化区域，即浏览器的窗口，注意的是，它并不是body，而是能见得到的可视化区域

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div{
width: 200px;
height: 200px;
background: deepskyblue;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div>box</div>
没有比脚更长的路，没有比人更高的山first<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>

</body>
</html>


上述的代码是没有添加定位属性的，可以看到box是占据文档流的，而文字是在盒子的下方进行显示出来的。



给div的盒子添加属性

div{
width: 200px;
height: 200px;
background: deepskyblue;
position: fixed;
top: 200px;
left: 200px;
line-height: 200px;
text-align: center;
}


显示如下:



可以看到上图中，box盒子的定位是固定的，在可视化区域中滚动条滚动的时候，但是并不会影响到盒子的位置，盒子也不会因其滚动而改变位置，并且盒子原来的位置其实已经不去占有了，即脱离了文档流了，固定定位 fixed (通常用于固定的导航栏，或者侧边栏广告)

相对定位relative

相对定位，相对总是要有一个参考点的，那么相对定位的参考点是什么?？相对定位主要是相对于其正常出现的位置(原来的位置)，并且不会去脱离文档流，所以原来的位置依然保留下来，现在的位置是脱离了文档流，漂浮起来,所以一般情况下，我们并不去使用相对定位，而只是把它用来当做父级的定位元素

使用:

position:relative;


div{
width: 200px;
height: 200px;
background: deepskyblue;
position: relative;
top: 300px;
left: 150px;
line-height: 200px;
text-align: center;
}


将上面的源代码修改成relative形式



可以看到相对定位之后，原来的位置依然存在，而新的位置是相对于原来位置来说的，原来的位置依旧保留下来，并且没有脱离文档流，所以一般情况下面，我们都很少去使用这种定位关系。而只是用来做为绝对定位的父级元素的定位

绝对定位absolute

绝对定位，既然是定位，肯定要有一个参考点，固定定位相对的是可视化窗口，相对定位是相对于原来出现的位置，那么绝对定位呢？绝对定位是相对于最近的父级定位元素(包括我们的三种定位fixed，relative，absolute)定位，只是用relative去做为父级定位元素，不会去影响父级元素的特性，注意：如果一直到body都没有找到定位元素，那么这个时候就相对于我们的body定位

使用：

position:absolute;
注意：父级元素同样是需要定位的，如果没有定位的话，会一直往上找


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.box1{width: 400px;height: 400px;border: 1px solid red;position: relative;top: 50px}
.box2{width: 300px;height: 300px;border: 1px solid green;
position: absolute; left: 50px;
top: 50px;}
.box3{width: 200px;height: 200px;border: 1px solid blue;position: absolute;left: 50px;top: 50px}
</style>
</head>
<body>
<div class="box1">
box1
<div class="box2">
box2
<div class="box3">
box3
</div>
</div>
</div>
没有比脚更长的路，没有比人更高的山first<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>
没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>没有比脚更长的路，没有比人更高的山<br>
</body>
</html>


显示效果如下所示:



如上所示:

box1采用的是relative定位形式，box2是相对于box1来进行居中的，所以它会去寻找父级box1的定位形式，box3是相对于box2进行居中的，所以它会去寻找box2的定位形式，所以如果需要相对某个元素进行定位的话，这个时候需要在自己添加绝对定位，并且给父级元素也要有一个定位，无论是fixed，还是relative，或者是absolute也可以

注意：使用absolute之后，margin:auto失效了

注意定位的一些问题:

没有定位的情况下，快级元素如果不给宽度，是默认父级元素的100%，但是定位以后，不再默认宽度100%，是内容撑开宽度

无论是什么标签，只要定位以后都是可以支持宽高的，除了relative，也就是如果脱离了文档流后，都是可以支持宽高的

脱离文档流用了absolute之后，这个时候使用margin:auto失效，但是也可以利用其实现居中效果

层级关系z-index

什么是层级关系？？之前在写float相关的时候，说浮动的时候会提升半个层级，那么什么是层级？因为浮动和定位(relative除外)，会脱离文档流，这样的一种脱离过程就会导致原来的位置被其他元素填充，而自己浮在其内容之上，造成一种叠加的效果，那么这样一层一层的形式，就叫做层级关系。

所以层级的关系是在针对脱离文档流的基础之上的，如果没有脱离文档流，每个元素都自己占有一块位置，也就不会形成层级的关系。

层级属性z-index:999;


注意：值没有单位，值越大，层级越高，就会越在上面，并且值没有上限，也没有下限，只比较值得大小

使用定位来完成居中效果

使用cacl计算值来进行居中操作:

计算公式如下:

left:calc(50% - 100); //50%是父级元素的宽度的一半，100是子级元素的一半，水平居中
top:cacl(50% - 100);//50%是父级元素高度的一半，100是子元素的一半，垂直居中


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.box1{width: 300px;height: 300px;box-shadow: 0 0 10px 0 deeppink;position: relative;margin:20px}
.box2{width: 200px;height: 200px;box-shadow: 0 0 5px 0 blue;position: absolute;left: calc(50% - 100px);
top:calc(50% - 100px);}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>

</body>
</html>


显示如下：


一种奇葩的方法：

水平居中:

position:absolute;
margin:auto;
left:0;
right:0;


上下居中:

position:absolute;
margin:auto;
left:0;
right:0;


如果是上下左右居中的话:

position:absulote;
top:0;
bottom:0;
left:0;
right:0;


所以对上面的案例进行修改后，依旧是可以实现居中效果的：

对部分style进行修改：

.box1{width: 300px;height: 300px;box-shadow: 0 0 10px 0 deeppink;position: relative;margin:20px}
.box2{width: 200px;height: 200px;box-shadow: 0 0 5px 0 blue;position: absolute;left: 0;);
top:0;right: 0;bottom: 0;margin: auto}


同样是可以实现居中显示的:



欢迎持续访问博客，谢谢
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  定位 固定定位 相对定位 绝对定位 居中效果实现
相关文章推荐
新的分享
章节导航