网页前端知识汇总（二）——网页前端布局关于position的用法

 

网页布局是前端技术人员必学的知识体系，知识涵盖面还是挺广的，不仅仅要学习HTML标签，还要学习简单的JavaScript相关知识，说起十五年前，那时候table布局还是很广泛，后来DIV的强势登榜，对网页前端的知识面又扩大了很多，如HTML3到后来的HTML5等，JavaScript到后来的jQuery集成库等，相关技术一直在不断延伸，各种特效库，框架的诞生，使得前端要学的知识越来越多，最常用的布局功能position是网页布局重要标签属性，大家都不陌生，但是具体是怎么用的，很多初学者可能还有点陌生，下面我讲解下这个position属性怎么用，它就像一张花布，定位好位置后，你就可以在上面画画了

首先，你先用写一个框div，如写一个600px*300px的div框

<div style="width:600px; height:300px; background-color:#9C9; margin:0px auto; margin-top:150px;"></div>

然后给这个框加上position属性，因为框架属于顶级div，你给它加上relative属性，为什么要这样，因为只有这样，在里面的div位置你才好固定它的位置

如在右下角固定元一个50*50px的框，你该怎么写呢？

你应该这样写：

<div style="width:600px; height:300px; background-color:#9C9; margin:0px auto; margin-top:150px; position:relative;"><div style="width:50px; height:50px; position:absolute; bottom:0; right:0; background-color:#03C;"></div></div>

 使用的是position:absolute;属性，只有父级是relative属性，下面才可以用absolute属性；加完给与bottom，right两个方向固定，就可以固定子级其他DIV位置了

方向属性主要有top，left，bottom，right，正常使用两个就可以了，指的的是距父级边框的边距，具体值你可以根据你项目要求写

 这里有什么陷阱呢？主要是子级div，您要给与具体宽度和高度，不然定位会不准确，同时就是显示层级关系，如你写两个位置一样的div，尺寸一样大，后面的就会覆盖前面的，那如何后面的显示在前面的下面呢？

你得给div加上z-index属性，给与数字，正常数字越小越显示在底层，数字值越大，越显示在顶层，就这样，显示层级关系就好确定了

今天就写到这里，有前端工作者遇到使用问题可以随时留言交流！