CSS中的position定位

在接触div+css做页面布局的时候，难免会碰到position进行定位操作。网面布局中分为标准流和定位以及层级结构布局。先看看一下什么是标准流的布局。

1.标准流布局

在标准流的布局中常见的有块级和内联布局。

• 块级布局：div,p

首先，定义了两个div，他们在浏览器中呈现的就是块级布局，即我们常说的独占一行。

<定义了!DOCTYPE html>


    
    
    


    

    

• 内联布局：span，a，input等

所谓内联布局就是在，长度元素允许的情况下，会呈现一行的排序，当长度不够时才会出现换行

    
    
    


    

    

    打开
    关闭
    我和上面的CheckBox是内联的

2. 定位布局和层级布局

从上面的例子中可以看出来，如果定义不同的div，那么正常会在页面显示出多个块级元素，依次往下堆叠。然而在实际需求中，我们会发现并非如此，我们有时需要嵌套，需要打乱元素的基本布局即标准流布局方式，来达到更人性化更加美观的布局方式。

那么我们来看看css体用的用于打破标准流布局的position是怎么使用的。

2.1 position分类

position包含四个属性：

• relative：相对定位
• absolute：绝对定位
• fiexed：固定定位
• inherit：继承

只是定义position的四种属性是没有任何意义的，需要配合top,bottom,left,right来使用。

2.2 position之relative

relative：相对定位，它相对的是当前位置

top：距离窗口上距

bottom：距离窗口下距

left：距离窗口左距

right：距离窗口右距

来看一个简单的例子

从上面的例子中可以看出，红色区块相对于左上窗口产生了偏移，当指定top和left时，它是以左上角为圆点位置向如图的方向进行X正轴和Y正轴进行偏移的。

如果换成其他的形式呢，来看看top，bottom，left，right的不同组合会产生什么情况呢？

从上面我们可以看出它其实是在圆点的位置向右偏移了，也就是说它是以自身为左上为相对位置来进行偏移的。

2.2 position之absolute

absolute：绝对定位

top：距离窗口上距

bottom：距离窗口下距

left：距离窗口左距

right：距离窗口右距

红色确实产生了偏移，而且是在窗口的左上角作为圆点的基础上进行了偏移。

从上面看出来，它是以窗口右上角作为圆点向左作为X正轴，向下作为Y轴正方面。

到这里我们就能理解absolute是怎么进行绝对定位的了，它是以窗口或者父元素的左上顶点，右上顶点，右下顶点，左下顶点作为圆点向其他方面进行偏移的，这点就跟relative不同的。

2.3 position之fixed

fixed：固定定位，指的是固定在窗口的某个位置，不随着滚动改变而改变，常用于悬浮窗口的使用。

html>

lang="en">
    charset="UTF-8">
    
    




class="pre">
    
class="div1">

可以看出效果是固定在了左侧中间的位置，不随滚动条的滚动而发生改变，始终是窗体的中间位置。

2.4 postion之inherit

inherit：继承，意思就是需要依赖于父元素才能实现，单独定义没有实际意思，不会生效。我们来看一下简单的demo

可以看出，红块并未产生任何偏移，说明没有时间生效。我们来修改一下父元素的属性

这下是发生了偏移，说明他从父元素中继承了relative属性，并产生了作用

2.5 综合实例

通过上面得例子我们来实现一个综合的实例，做一个悬浮框，使用到position。首先来看一下效果图

上面的例子分三层结构目录，常用于一般的门户购物网站的应用。

• 创建整体窗口

清空所有边距

* {
            padding: 0;
            margin: 0;
        }

定义父窗体

.page {
            width: 100%;
            height: 4000px;
            background: url("") center top no-repeat;
        }

• 定义导航栏

在父窗体的基础上定义导航菜单

.nav {
            width: 160px;
            height: auto;
            background: red;
            border-bottom: 1px solid #666;
            position: fixed;
            top: 50%;
            left: 0;
            margin-top: -100px;
        }

        .nav-li {
            width: 160px;
            height: auto;
            text-align: center;
            font-size: 16px;
            border-bottom: 1px solid #666666;
        }

        .tit {
            width: 160px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            border-bottom: 1px solid #666666;
        }

        

            
蔬菜推荐
        
        

            
水果推荐
        
        

            
肉类推荐
        
        

            
熟食推荐
        
        

            
礼包推荐
        
    

生成的效果图

• 定义二级菜单

我们可以在一级菜单的基础上添加二级菜单，简单的添加几个ul

    
    
    



    

        

            
蔬菜推荐
            

                
大白菜

                
                
空心菜

                
                
马铃薯

                
                
油白菜

                
            
        
        

            
水果推荐
            

                
红富士

                
                
樱桃

                
                
葡萄

                
                
西瓜

                
            
        
        

            
肉类推荐
            

                
五花肉

                
                
牛肉

                
                
鸡肉

                
                
羊肉

                
            
        
        

            
熟食推荐
            

                
猪耳朵

                
                
猪蹄

                
                
腊肠

                
                
猪肝

                
            
        
        

            
礼包推荐
            

                
中秋大礼包

                
                
坚果大礼包

                
                
薯片大礼包

                
                
熟食大礼包

                
            
        
    

但是这样看起来就有点不太美观了，我们来优化一下，当我鼠标移动到一级菜单上，才会显示二级菜单，要怎么定义呢？首先我们会将二级菜单隐藏掉，然后给一级菜单一个hover事件来处理，使用伪类的方式。

.nav-li ul {
            width: 160px;
            height: auto;
            display: none;
            text-align: center;
            line-height: 40px;


        }

 .nav-li:hover ul {
            display: block;
        }

这样看上去还是不错的。

• 定义三级菜单

其实在这里就可以想到了，添加三级菜单也是很容易的跟二级菜单差不多，唯一不同的地方就是需要将三级菜单使用，需要注意的就是使用绝对定位absolute。

.list-3 {
            width:160px;
            height:auto;
            font-size: 14px;
            display: none;
            position: absolute;
            left:160px;
            top:0;
        }
        .list-3 ul li{
            width:160px;
            height:40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            border-bottom: 1px solid #fff;
            background: green;
        }
        .nav-li ul li:hover div{
            display: block;
        }

    

        

            
蔬菜推荐
            

                
大白菜
                    

                        

                            
国内大白菜
                            
国外大白菜
                        
                    
                
                
空心菜
                    

                        

                            
国内空心菜
                            
国外空心菜
                        
                    
                
                
马铃薯
                    

                        

                            
国内马铃薯
                            
国外马铃薯
                        
                    
                
                
油白菜
                    

                        

                            
国内油白菜
                            
国外油白菜
                        
                    
                
            
        
        

            
水果推荐
            

                
红富士
                    

                        

                            
国内红富士
                            
国外红富士
                        
                    
                
                
樱桃
                    

                        

                            
国内樱桃
                            
国外樱桃
                        
                    
                
                
葡萄
                    

                        

                            
国内葡萄
                            
国外葡萄
                        
                    
                
                
西瓜
                    

                        

                            
国内西瓜
                            
国外西瓜
                        
                    
                
            
        
        

            
肉类推荐
            

                
五花肉
                    

                        

                            
国内五花肉
                            
国外五花肉
                        
                    
                
                
牛肉
                    

                        

                            
国内牛肉
                            
国外牛肉
                        
                    
                
                
鸡肉
                    

                        

                            
国内鸡肉
                            
国外鸡肉
                        
                    
                
                
羊肉
                    

                        

                            
国内羊肉
                            
国外羊肉
                        
                    
                
            
        
        

            
熟食推荐
            

                
猪耳朵
                    

                        

                            
国内猪耳朵
                            
国外猪耳朵
                        
                    
                
                
猪蹄
                    

                        

                            
国内猪蹄
                            
国外猪蹄
                        
                    
                
                
腊肠
                    

                        

                            
国内腊肠
                            
国外腊肠
                        
                    
                
                
猪肝
                    

                        

                            
国内猪肝
                            
国外猪肝
                        
                    
                
            
        
        

            
礼包推荐
            

                
中秋大礼包
                    

                        

                            
国内中秋大礼包
                            
国外中秋大礼包
                        
                    
                
                
坚果大礼包
                    

                        

                            
国内坚果大礼包
                            
国外坚果大礼包
                        
                    
                
                
薯片大礼包
                    

                        

                            
国内薯片大礼包
                            
国外薯片大礼包
                        
                    
                
                
熟食大礼包
                    

                        

                            
国内熟食大礼包
                            
国外熟食大礼包
                        
                    
                
            
        
    

效果就出来了。