CSS的四种定位方式总结

最新推荐文章于 2024-05-15 13:58:29 发布
最新推荐文章于 2024-05-15 13:58:29 发布
阅读量4k 收藏 17
点赞数 3
分类专栏： 前端 文章标签： css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cleverGump/article/details/91375139
版权

文章目录

CSS的四种定位方式（position）

  • 静态定位（默认） static
  • 相对定位 relative
  • 绝对定位 absolute
  • 固定定位 fixed

案例使用的 html 代码：

<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

1. 静态定位（默认）

position: static;

在静态定位的情况下，每个元素都处在常规文档流中。它们都是块级元素，所以就会在页面中自上而下地堆叠起来。

静态定位的元素，设置 top bottom left right 属性将不起作用，因为元素只会按照其体积大小，从上往下依次排列，不可能按照你设定的上下左右的数值去排列。

demo 默认的显示效果：
在这里插入图片描述

2. 相对定位


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  cleverGump
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
CSS 四种定位方式总结

				
			

			

				

					m0_50694272的博客
				

				

					10-16
					
					258
					
				

			

		

		

			
				
CSS学习自检

什么是定位？

定位：是将盒子定在某一个位置。
定位 = 定位模式 + 边偏移 。
定位模式决定元素的定位方式，边偏移则决定了该元素的最终位置。

定位模式与边偏移
  选择器 {
   position: static; 
   top: 10px; 
   }

定位模式
定位模式是通过 CSS 的 position 属性来设置，其值可以分为以下几类：




属性

说明




static
静态定位
是元素的默认定位方式，按照标准流特性摆放位置，它没有边偏移


relative

			
		

	



                

              
                



	

		

			

				
					
CSS之position定位

				
			

			

				

					qq_33554950的博客
				

				

					02-27
					
					237
					
				

			

		

		

			
				
CSS之position定位position属性值position:sticky粘性定位的计算规则层次滚动效果实现
position属性值
absolute：绝对定位，相对于static定位以外的第一个父元素进行定位
fixed：绝对定位，相对于浏览器窗口
relative：相对定位，相对于正常位置
static：默认值
inherit：从父元素继承
sticky：当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed
（注：top或left必须要有明确的计算值，否则fixed的

			
		

	



                


  
              

                


	

		

			

				
					
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）

				
			

			

				

					Erya Programming learning
				

				

					05-31
					
					2019
					
				

			

		

		

			
				
一、CSS之position定位方式
position 属性规定元素的定位类型，有以下五种：

static
relative
absolute(脱离文档流)
fixed（脱离文档流）
sticky（新属性）

两种脱离正常文档流的定位方法，会把元素的宽高设置成内容的宽高
常用 top/bottom/left/right 属性进行偏移
1.static
静态定位，是position的默认值，可不设置。
默认布局方式，从上到下，从左到右，正常文档流。
position: static;

2.relative

			
		

	





	

		

			

				
					
2024年最全css中的定位详解(1)，怒斩腾讯和阿里的Offer

					
最新发布

				
			

			

				

					2401_84975411的博客
				

				

					05-15
					
					616
					
				

			

		

		

			
				
定位模式是否脱标移动位置是否常用static 静态定位否不能使用边偏移很少relative 相对定位否（占有位置）相对于自身位置移动常用absolute 绝对定位是（不占有位置）带有定位的父级常用fixed 固定定位是（不占有位置）浏览器可视区常用sticky 粘性定位否（占有位置）浏览器可视区当前阶段少。

			
		

	



		

			
		



	

		

			

				
					
CSS中常用的几种定位方式

				
			

			

				

					m0_48011056的博客
				

				

					10-15
					
					4316
					
				

			

		

		

			
				
CSS中相对定位、绝对定位、固定定位、粘性定位

			
		

	





	

		

			

				
					
CSS的几种定位方式

				
			

			

				

					liu0513916的博客
				

				

					10-10
					
					1万+
					
				

			

		

		

			
				
CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局。

css定位的几种方式：

1、static（静态定位）：

默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有

			
		

	





	

		

			

				
					
CSS的四种定位方式

				
			

			

				

					jhfvuyhgui的博客
				

				

					03-31
					
					1万+
					
				

			

		

		

			
				
CSS的四种定位方式
1.静态定位：
设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。

2.相对定位：
设置方式为position: relative;相对定位的盒子脱离了标准流，盒子的层级高于标准流和浮动

...

			
		

	





	

		

			

				
					
关于CSS中关于定位的总结

				
			

			

				

					01-08
				

			

		

		

			
				
CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位. static静态定位:应用的场景不多,这里不做介绍 下面主要介绍一下其他三种常见的定位 1.position:relative相对定位:顾名思义,相对定位...

			
		

	





	

		

			

				
					
CSS两列布局实现方式总结

				
			

			

				

					09-24
				

			

		

		

			
				
这篇文章主要总结了两种常用的CSS布局方法：absolute + margin和float + margin，来实现这种布局。  1. **absolute + margin 方式**  - **基本原理**：此方法利用`position: absolute`将侧边栏定位到相对于其最近的...

			
		

	





	

		

			

				
					
利用CSS3的定位页面元素

				
			

			

				

					09-25
				

			

		

		

			
				
总结来说，CSS3的定位功能包括但不限于子字符串匹配选择器、`:nth-child()`、`:nth-last-child()`和`:only-of-type()`等，这些工具为开发者提供了强大且灵活的方式来定位和设计页面元素，使得页面布局更加精准且易于...

			
		

	





	

		

			

				
					
css的三种定位方式使用探讨

				
			

			

				

					12-13
				

			

		

		

			
				
css 3种类型定位方式，进行控制页面布局：普通定位，浮动定位，绝对定位。 
默认使用普通流技术再页面中布局元素，希望表现与普通流不同，另外两个特性position和float 
具体实例 
复制代码代码如下: <html> <head> <title> css定位功能探索 </title> <style type=”text/css”> #relative{ /*相对定位探索 将相对于它在普通流中位置进行定位 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 相对定位是“相对于”元素在文档中的初始位置 */ position: relative; top:

			
		

	





	

		

			

				
					
利用CSS定位背景图片的常用方法总结

				
			

			

				

					09-24
				

			

		

		

			
				
其次，CSS3中的`background-position`扩展语法提供了一种更灵活的方式来定位背景图片。我们可以指定背景图片相对于元素的任意角落的偏移量。例如，将图片定位在元素右下角5px的位置，可以这样写：  ```css .keith { ...

			
		

	





	

		

			

				
					
CSS常用样式简单的总结包括定位、显示等属性

				
			

			

				

					12-13
				

			

		

		

			
				
CSS定位属性包括position、top、bottom、left、right和z-index  Position属性指定元素如何在页面上定位，取值为：static ,relative或absolute.  Static表示正常定位，relative是指定位在相对于页面上前一个元素的...

			
		

	





	

		

			

				
					
CSS的五种定位方式

				
			

			

				

					weixin_45317422的博客
				

				

					02-23
					
					1285
					
				

			

		

		

			
				
CSS中一共有五种定位：
position：static；默认值
position：absolute；绝对定位
position：relative；相对对定位
position：fixed；固定定位
position：sticky；粘性定位
其中，粘性定位是CSS3新增加的  兼容性比较差
定位的作用：
在正常情况下，可以让一个元素覆盖在另外一个元素上面
可以移动一个元素的位置
可以固定某个容器在...

			
		

	





	

		

			

				
					
CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记

				
			

			

				

					做技术，坚持才是最重要的，一时的热情只是暂时的进步
				

				

					09-29
					
					1595
					
				

			

		

		

			
				
一、static定位
没有定位，遵循正常的文档流对象，不会受到 top, bottom, left, right影响。
.static {
     position: static;/*默认*/
     width: 100px;
     height: 100px;
     border: 3px solid #73AD21;
     }

二、相对定位
相对该元素原本文档流的位置进行定位，且原本的位置保留。
<!DOCTYPE html>
<html>
	<hea

			
		

	





	

		

			

				
					
CSS中的四种定位方式

					
热门推荐

				
			

			

				

					m0_71074684的博客
				

				

					07-11
					
					1万+
					
				

			

		

		

			
				
CSS中的四种定位方式

			
		

	





	

		

			

				
					
css定位哪几种方式

				
			

			

				

					Adelam的博客
				

				

					03-21
					
					509
					
				

			

		

		

			
				
css定位有哪几种
1.position:static;默认值
2.position: absolute;绝对定位
3.position:relative;相对定位
4.position:fixed;固定定位
5.position:sticky;粘性定位
特征
position:static;
默认值，设置坐标无效
     position: absolute;
    1：脱离文档流，占位置
...

			
		

	





	

		

			

				
					
css五大定位

				
			

			

				

					weixin_73810008的博客
				

				

					12-08
					
					927
					
				

			

		

		

			
				
一篇文章带你入门css中的定位问题，定位，启动！！！

			
		

	





	

		

			

				
					
CSS3样式表- 定位.pptx

				
			

			

				

					05-06
				

			

		

		

			
				
这两种定位方式可以帮助网页设计者更灵活地控制元素的位置，实现更复杂的布局效果。  在具体的网页设计中，我们可以利用浮动和定位这些技术来实现各种各样的布局效果。例如，可以利用浮动创建多栏布局，在页面上展示...

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值