Home思洋影视事业部网站建设知识库
0 Comments

实例解析CSS DIV绝对定位与固定定位用法

发布于：2013-11-04  |   作者：广州网站建设  |   已聚集：人围观

CSS DIV网页布局有很多值得学习的地方，而定位是非常重要的知识，本文和大家通过实例向大家描述一下CSS DIV绝对定位与CSS DIV固定定位的应用，希望对你的学习有所帮助。

CSS DIV中绝对定位与固定定位实例

CSS DIV中绝对定位与固定定位内容是非常重要的，如果你掌握不好DIV的定位你的CSS写出来会很乱，下面我们要来看看CSS DIV绝对定位与固定定位实例，这个我想对你会有帮助的。
广州网站建设,网站建设,广州网页设计,广州网站设计

第一个CSS DIV固定定位实例



    
	
  1. 
		<styletypestyletype="text/css"> 
    2. 
	
  2. 
		p.one  
    3. 
	
  3. 
		{  
    4. 
	
  4. 
		position:fixed;  
    5. 
	
  5. 
		left:5px;  
    6. 
	
  6. 
		top:5px;  
    7. 
	
  7. 
		}  
    8. 
	
  8. 
		p.two  
    9. 
	
  9. 
		{  
    10. 
	
  10. 
		position:fixed;  
    11. 
	
  11. 
		top:30px;  
    12. 
	
  12. 
		right:5px;  
    13. 
	
  13. 
		}  
    14. 
	
  14. 
		</style> 
    15. 
	
  15. 
		</head> 
    16. 
	
  16. 
		<body> 
    17. 
	
  17. 
		 
    18. 
	
  18. 
		<pclasspclass="one">一些文本。</p> 
    19. 
	
  19. 
		<pclasspclass="two">更多的文本。</p> 
    20. 
	
  20. 
		 
    21. 




	第二CSS DIV绝对定位




    
	
  1. 
		<styletypestyletype="text/css"> 
    2. 
	
  2. 
		h2.pos_abs  
    3. 
	
  3. 
		{  
    4. 
	
  4. 
		position:absolute;  
    5. 
	
  5. 
		left:100px;  
    6. 
	
  6. 
		top:150px  
    7. 
	
  7. 
		}  
    8. 
	
  8. 
		</style> 
    9. 
	
  9. 
		 
    10. 
	
  10. 
		<h2classh2class="pos_abs">这是带有绝对定位的标题</h2> 
    11. 
	
  11. 
		<p>通过绝对定位，元素可以放置到页面上的任何位置。  
    12. 
	
  12. 
		下面的标题距离页面左侧100px，距离页面顶部150px。</p> 
    13. 
	
  13. 
		 
    14. 
	
  14. 
		 
    15. 



			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机