CSS Positioning(定位)

最新推荐文章于 2024-09-05 04:19:52 发布
最新推荐文章于 2024-09-05 04:19:52 发布
阅读量333 收藏
点赞数
分类专栏： CSS3 文章标签： css float Positioning
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boonyaxnn/article/details/64923630
版权

使用Positioning属性设置左右对齐：


.div{
     position:absolute;
     right:0px;
     width:300px;
     background-color:#b0e0e6;
}
















float属性是对齐元素的方法之一： 




.div{
     position:absolute;
     right:0px;
     width:300px;
     background-color:#b0e0e6;
}








                

        

        

    

  


    

      

        

            

              
                
                  boonyaxnn
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
CSS Positioning (定位)

				
			

			

				

					h13673476027的博客
				

				

					11-14
					
					206
					
				

			

		

		

			
				
Positioning (定位)
CSS 定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。他们也有不同的工作方式，这取决于定位方法.

有四种不同的定位方法。

			
		

	



                

            
              



	

		

			

				
					
css-positioning:2015 年 CSS 定位技术的高级概述

				
			

			

				

					05-31
				

			

		

		

			
				
CSS 定位 2015 年 CSS 定位技术的高级概述。  最重要的课题。 无处不在：布局、菜单、表单……  错误选择后重新开发的成本很高。  公认的解决方案必须是响应友好的。 负保证金 -没有React 绝对位置 -没有兄弟姐妹的...

			
		

	



              


  
              

                


	

		

			

				
					
CSS 定位 (Positioning)

				
			

			

				

					weixin_57762660的博客
				

				

					10-28
					
					70
					
				

			

		

		

			
				
1.本例演示如何相对于一个元素的正常位置来对其定位。

2.把下面图片中的代码打出来









相对定位会按照元素的原始位置对该元素进行移动比如，样式 "left:-20px" 从元素的原始左侧位置减去 20 像素，样式 "left:20px" 向元素的原始左侧位置增加 20 像素。

效果图如下









3.本例演示如何使用绝对值来对元素进行定位。

4.把下面图片中的代码打出来







通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距...

			
		

	





	

		

			

				
					
5.4 CSS固定定位

					
最新发布

				
			

			

				

					Python老吕的博客
				

				

					09-05
					
					910
					
				

			

		

		

			
				
与绝对定位类似，固定定位会使元素脱离文档流，但它的位置是相对于视口（viewport）的，这意味着即使页面滚动，元素也会保持在相同的屏幕位置。：固定定位的元素具有“固定”在页面上的特性，即使用户滚动页面，元素也会保持在设定的位置不变。然而，在复杂的页面布局中，过多的固定定位元素可能会影响页面的性能，特别是在频繁滚动和重绘的情况下。：固定定位的元素会创建一个新的层叠上下文，这意味着它可以包含其他定位元素（如绝对定位的子元素），并且可以控制这些元素的层叠顺序。但是，它们可以创建自己的层叠上下文，并可以通过。

			
		

	



		

			
		



	

		

			

				
					
CSS positioning (定位)

				
			

			

				

					liboy0001的博客
				

				

					07-01
					
					57
					
				

			

		

		

			
				
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于页面。静态定位的元素不会受到 top, bottom, left, right 影响。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。HTML 元素的默认值，即没有定位，元素出现在正常的流中。元素的定位与标准流无关，所以它们可以覆盖页面上的其它元素。相对定位元素经常被用来作为绝对定位元素的容器块。元素的位置相对于浏览器窗口是固定位置。固定定位脱离的标准流 不占位置。相对定位只适合小范围移动。

			
		

	





	

		

			

				
					
5.1 CSS静态定位

				
			

			

				

					Python老吕的博客
				

				

					09-04
					
					837
					
				

			

		

		

			
				
静态定位（Static Positioning）是所有元素的默认定位方式，它表示元素按照正常的文档流进行布局，即元素的位置由HTML中的顺序决定，不受CSS定位属性的影响。通过理解静态定位与其他定位方式的比较和应用，开发者可以根据项目需求选择合适的定位技术，创建出既美观又功能丰富的网页布局。静态定位的这些示例代码展示了如何在不使用显式定位属性的情况下，通过外边距、内边距和盒模型的其他属性来创建整洁和有序的布局。静态定位是所有HTML元素的默认定位方式，它决定了元素在页面上的默认布局行为。

			
		

	





	

		

			

				
					
CSS Position 定位布局

				
			

			

				

					blog
				

				

					07-13
					
					796
					
				

			

		

		

			
				
文章目录前言一、 Position 定位布局二、 属性值定位类型语法top，right，bottom，left 属性三、 实例相对定位绝对定位固定定位粘性定位总结

前言
在页面开发的过程中，CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
当前主要的布局方式有：浮动布局(Float)、定位布局(Position)、弹性布局(Flex)、网格布局(Grid)等，本文将探讨 position 定位布局。

一、 Position 定位布局
定位

			
		

	





	

		

			

				
					
CSS定位（Positioning）概述 绝对定位相对定位

				
			

			

				

					m0_51701478的博客
				

				

					12-25
					
					331
					
				

			

		

		

			
				
CSS定位（Positioning）概述
CSS包括相对定位和绝对定位
1，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
例：
#Box{
position:relative;
top:50px；
}
这样的话Box是在原来的基础上整体向上移动50px，是相对于自己原来的位置移动

2，绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的

			
		

	





	

		

			

				
					
5.2 CSS相对定位

				
			

			

				

					Python老吕的博客
				

				

					09-04
					
					838
					
				

			

		

		

			
				
相对定位是CSS布局中一个非常实用的工具，它提供了一种简单而有效的方法来调整元素的位置，同时保持布局的灵活性和响应性。使用相对定位时，开发者可以精确控制元素的位置，同时保持其在文档流中的位置，这使得相对定位成为实现复杂布局的强大工具。相对定位是一种非常灵活的定位方式，它为开发者提供了在不破坏文档流的情况下调整元素位置的能力。相对定位提供了在保持文档流位置的同时进行位置调整的能力，而其他定位方式则提供了不同的布局解决方案。相对定位是一种CSS定位机制，它允许元素在保持其在文档流中的原始位置的同时进行偏移。

			
		

	





	

		

			

				
					
CSS定位

				
			

			

				

					qq_43473072的博客
				

				

					07-13
					
					120
					
				

			

		

		

			
				
css定位position的5种不同位置值重叠元素
转自：https://www.w3school.com.cn/css/css_positioning.asp
position的5种不同位置值
1.static：静态不可动
2.relative：正常位置（靠最左）
----可通过元素的 top、right、bottom 和 left 属性进行相对调整
3.fixed：元素是相对于视口进行定位的（即使滚动页面，它也始终位于同一位置）
----可通过元素的 top、right、bottom 和 left 属性

			
		

	





	

		

			

				
					
css-layout-and-positioning-css布局与定位

				
			

			

				

					03-26
				

			

		

		

			
				
在网页设计中，CSS（Cascading Style Sheets）...在“css-layout-and-positioning-master”这个压缩包中，可能包含了一系列关于CSS布局与定位的实例和教程，通过学习和操作这些文件，你可以更好地理解和应用这些概念。

			
		

	





	

		

			

				
					
css-positioning:为简单起见，使用 react 构建的常见 css 定位方法教程

				
			

			

				

					07-24
				

			

		

		

			
				
css定位 为简单起见，使用 react 构建的常见 css 定位方法教程。 此 repo 旨在用作现场演示和概念证明。 npx create-react-app 生成的自述文件： 创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录...

			
		

	





	

		

			

				
					
css 相对定位 绝对定位 浮动 分析

				
			

			

				

					09-25
				

			

		

		

			
				
在CSS布局中，定位（Positioning）是一种关键的机制，用于控制元素在页面上的精确位置。本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。  **相对定位（Relative ...

			
		

	





	

		

			

				
					
详解CSS粘性定位 sticky

				
			

			

				

					12-11
				

			

		

		

			
				
CSS粘性定位（sticky positioning）是CSS布局中的一种特性，它允许元素在用户滚动页面时在特定条件下保持可见。在CSS中，`position: sticky`是实现这一效果的关键。这个属性可以看作是`static`（无定位）和`fixed`...

			
		

	





	

		

			

				
					
css实现圆形头像

					
热门推荐

				
			

			

				

					boonyaxnn的博客
				

				

					03-02
					
					1万+
					
				

			

		

		

			
				
效果图如下：

			
		

	





	

		

			

				
					
CSS3 @keyframes动画规则

				
			

			

				

					boonyaxnn的博客
				

				

					03-12
					
					4047
					
				

			

		

		

			
				
W3CSchool标准CSS使用语法  *@keyframes 针对不同浏览器兼容
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /*

			
		

	





	

		

			

				
					
CSS3 transform:rotate(deg) 2D旋转效果

				
			

			

				

					boonyaxnn的博客
				

				

					03-12
					
					3132
					
				

			

		

		

			
				
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		

		index
		
		

		

		
		
		
		
			body{
				background:url(img/a.jpg);

			
		

	





	

		

			

				
					
CSS 列表样式(ul)

				
			

			

				

					boonyaxnn的博客
				

				

					03-22
					
					2630
					
				

			

		

		

			
				
1、CSS列表属性作用如下：

设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像
2、在HTML中，有两种类型的列表： 

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 - 列表项的标记有数字或字母


	
		css 
		
		
		
		
		
			ul.a {
				list-style-type: circle;
			

			
		

	





	

		

			

				
					
CSS 盒子模型(Box Model)和轮廓（outline）

				
			

			

				

					boonyaxnn的博客
				

				

					03-22
					
					2095
					
				

			

		

		

			
				
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：



不同部分的说明：

Margin（外边距） - 清除边框区域。Margin没有背景

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值