解读Position

php中文网
发布: 2016-09-08 08:29:16
原创
2435人浏览过

首先position在字面讲是位置的意思,在html中是定位的意思,它有四种属性:分别是static是静态的,也是默认的效果,没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

absolute(绝对定位)

absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了 自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简 称TRBL)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。

  relative(相对定位)只可以在文本流中进行位置的上下左右的移动,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比 一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分 就需要用到绝对定位。

  fixed (固定定位)
生成固定定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  下面我用的实例具体讲一下Position的应用 :

 

  
    
        三国杀
        
    
    
        


            

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

                        
                    

                    
                    

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

            
                

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


                

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

                    
            

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            


            

                    

                    

                    

                    

                    解读Position
                    

                            

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         

  •                         
  • 4
                            

  •                     

            

                
        
            

                        
            
                
        
                解读Position    
            解读Position
            解读Position
            解读Position
            解读Position    
            解读Position
            解读Position    
            解读Position
        

            

            

            

                


                


                
    class="x1"

                
    class="x2"


            
        
        

    最佳 Windows 性能的顶级免费优化软件
    最佳 Windows 性能的顶级免费优化软件

    每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号