CSS的position定位及区别

最新推荐文章于 2022-12-26 16:46:35 发布
最新推荐文章于 2022-12-26 16:46:35 发布
阅读量272 收藏
点赞数
分类专栏： CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mufeng2015/article/details/104533375
版权

position 常用属性：

 

【1】static

静态定位。默认值，即没有定位，遵循正常的文档流对象，不受到 top、bottom、left、right影响。

【2】relative

相对定位。相对于离它最近的使用static定位的父元素进行定位，不脱离文档流（不影响其他元素的布局）。

例子：（为显而易见，将用内联样式）


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  水笙沐
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS中，position的绝对定位和相对定位的区别

				
			

			

				

					qq_42264597的博客
				

				

					01-28
					
					933
					
				

			

		

		

			
				
CSS中，position的绝对定位和相对定位的区别
1、position的四个值：static、relative、absolute、fixed
绝对定位：absolute和fixed统称为绝对定位
相对定位：relative
默认值：static
2、relative定位和absolute定位的区别
relative:相对于原来的位置移动，元素设置此属性之后依旧处于文档流中，不影响其他元素的布局，最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度
absolute:元素会

			
		

	



                

              
                



	

		

			

				
					
css详解position五种属性用法及其含义

					
热门推荐

				
			

			

				

					前端学习笔记
				

				

					04-12
					
					1万+
					
				

			

		

		

			
				
position（定位）
position — 作为css属性三巨头（position、display、float）之一，它的作用是用来决定元素在文档中的定位方式。其属性值有五种，分别是 — static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）。
static（正常定位）
static(正常定位) 是元素position属性的默认值，包含此属性的元素遵循常规流1。
正常定位呈现常规流的示例html代码：
<!DOCTYP

			
		

	



                


  
              

                


	

		

			

				
					
css中position定位有哪几个值可选，他们有什么区别？

				
			

			

				

					m0_73411780的博客
				

				

					12-26
					
					420
					
				

			

		

		

			
				
css中position定位有哪几个值可选，他们有什么区别？

			
		

	





	

		

			

				
					
CSS:position属性的区别

				
			

			

				

					yivisir的博客
				

				

					07-18
					
					1149
					
				

			

		

		

			
				
CSS中position属性的区别
static
即没有定位，遵循正常的文档流对象，会忽略top,left,bottom,right的作用；
  
fixed
相对于浏览器可视区固定位置；
脱离文档流，不占据空间
  
relative
相对于其正常位置定位；
原本占据的空间不会移动；
常用来作为绝对定位元素的容器；
  
absolute
相对于最近的已定位的父级元素，如果没有，则相对于html元素；
脱离文档流，不占据空间
  
sticky
基于用户的滚动位置来定位，在position和fixed之间

			
		

	



		

			
		



	

		

			

				
					
CSS的position属性区分说明

				
			

			

				

					zlingyun的博客
				

				

					08-10
					
					451
					
				

			

		

		

			
				
         首先，CSS的position属性选择有很多，不同浏览器支持的position属性多少有所不同。

        以谷歌为例，position支持absolute、relative、static、fixed、initial、inherit、sticky、unset。但是对于所有浏览器都会支持也是容易弄混的就是position的前面四个参数。

 

常用属性说明：

stati...

			
		

	





	

		

			

				
					
css position 定位

				
			

			

				

					01-19
				

			

		

		

			
				
如果下面的文字实在是无法理解透，那就记住这节课最后总结的一句话“如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的...

			
		

	





	

		

			

				
					
全面剖析CSS Position定位

				
			

			

				

					09-24
				

			

		

		

			
				
帮助大家全面剖析了CSS Position定位，CSS Position前端必学必会的内容，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
CSS Position(定位)

				
			

			

				

					12-13
				

			

		

		

			
				
CSS Position(定位)   position 属性指定了元素的定位类型。 position 属性的五个值：  fixed 定位 元素的位置相对于浏览器窗口是固定位置。 即使窗口是滚动的它也不会移动： 实例  p.pos_fixed { position:fixed; ...

			
		

	





	

		

			

				
					
css position 区别

				
			

			

				

					weixin_30486037的博客
				

				

					10-19
					
					71
					
				

			

		

		

			
				
转载于:https://www.cnblogs.com/ren120165809/p/9815204.html

			
		

	





	

		

			

				
					
CSS 布局 position 详解

				
			

			

				

					姜皓的博客
				

				

					06-01
					
					6705
					
				

			

		

		

			
				
CSS 布局 position 详解1.position 之 static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。实例：!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;ti...

			
		

	





	

		

			

				
					
css关于position属性的用法详解(绝对定位和相对定位的混淆)

				
			

			

				

					12-13
				

			

		

		

			
				
挺久没用，有点忘了关于position这个属性的用法，导致在练手的时候又犯了跟最开始新手才会犯的错误，那就是absolute和relative的用法。
在此首先看一下官方对这两个属性值的解释：
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好

			
		

	





	

		

			

				
					
Position的属性和属性值及差别

				
			

			

				

					Zykon
				

				

					03-09
					
					1959
					
				

			

		

		

			
				
Position的属性和属性值及差别
  Position的四个属性 ： 
  1.relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
  
  2.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “

			
		

	





	

		

			

				
					
CSS定位（position属性）以及top和magin-top的区别

				
			

			

				

					my_learning_road的博客
				

				

					10-22
					
					2799
					
				

			

		

		

			
				
CSS position 属性可以选择 4 种不同类型的定位：
static
默认定位，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中——这种定位是默认的，一般没什么实际的作用。
relative
相对定位 ，不会脱离文档流，类似于static，按顺序排列，一般设置也不会有什么变化，可以通过margin-top/right/bot

			
		

	





	

		

			

				
					
position 属性的常用的5种取值

				
			

			

				

					qq_41306423的博客
				

				

					06-22
					
					1万+
					
				

			

		

		

			
				
日期：2020 年 6 月 22 日
position 属性
前言
说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易
废话不多说，正文开始
小序
position 属性的取值有：static | relative | absolute | fixe

			
		

	





	

		

			

				
					
css position属性四个值：static、fixed、absolute和relative的区别和用法

				
			

			

				

					mus-z的博客
				

				

					02-10
					
					632
					
				

			

		

		

			
				
参考：https://zhuanlan.zhihu.com/p/29207938
https://blog.csdn.net/tengliu6/article/details/52088743
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的...

			
		

	





	

		

			

				
					
Position属性四个取值用法和区别

				
			

			

				

					Zetang_Wu的博客
				

				

					08-11
					
					1万+
					
				

			

		

		

			
				
Position属性四个取值用法和区别

在初学css的过程中常常会碰到设置定位的问题，大多数初学者都是大概明白，如果不好好弄清楚将会给以后的开发带来困难，经过本小菜对其他文章的浏览，自我总结如下：



目录



Position属性四个取值用法和区别

目录


-static
-relative
-absolute
-fixed
-relative和absolute的区别
-z-index...

			
		

	





	

		

			

				
					
css position属性

				
			

			

				

					断了的弦的博客
				

				

					08-03
					
					283
					
				

			

		

		

			
				
定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

默认值：
			static
		继承性：
			no
		版本：
			CSS2
		JavaScript 语法：
			object.style.pos...

			
		

	





	

		

			

				
					
position的四个属性以及之间的区别

				
			

			

				

					sinat_41747081的博客
				

				

					03-13
					
					1653
					
				

			

		

		

			
				
版权声明：本文为博主原创文章，未经博主允许不得转载。

postion具有四个属性分别是static(默认的）、absolute、relative、fixed

它们之前的区别是：

position:fixed是相对于浏览器窗口定位的，不会随着滚动条滚动而滚动；

position:absolute是基于不为static的父元素进行定位的，脱离了标准流；

position:relative是基...

			
		

	





	

		

			

				
					
CSS position属性详解

				
			

			

				

					胡子先生ya的博客
				

				

					04-12
					
					1036
					
				

			

		

		

			
				
对于css的学习一直都是处于了解但不专注的状态，就是大概知道是什么意思，但实际操作起来还是非常生疏，所以写下这篇博客来加深对css position属性的概念：首先position有四个值分别为：static:html元素的默认值，就是没有定位的意思，设置了该值后不受top、bottom、left、right影响fixed:设置了fixed后，该元素不随鼠标滚动而改变，也就是说固定在浏览器的固定位...

			
		

	





	

		

			

				
					
 css position 绝对定位

					
最新发布

				
			

			

				

					12-05
				

			

		

		

			
				
CSS中的绝对定位是一种定位方式，它可以将元素从文档流中脱离出来，并相对于最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块进行定位。绝对定位的元素不会占据文档流中的空间，...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值