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

来源：互联网发布：淘宝宝贝上架编辑技巧编辑：程序博客网时间：2024/05/28 15:07

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

关于定位
固定定位fixed
相对定位relative
绝对定位absolute
层级关系z-index
使用定位来完成居中效果

提示：
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

关于定位fixed

定位也就是元素相对于其正常出现的位置，或者是相对于父级应该出现的位置，甚至相对于浏览器窗口本身出现的内容；
无论是块级元素还是行级元素，或是什么类型的标签,只要定位以后(relative除外)，都可以支持宽高
定位的相关属性:

属性属性值 position fixed/relative/absolute left px / % right px / % top px / % bottom px / %

固定定位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}

同样是可以实现居中显示的:
这里写图片描述

欢迎持续访问博客，谢谢

阅读全文

1 0