WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>前端样式>>CSS常用的定位属性:CSS基本定位与高级定位示例

CSS常用的定位属性:CSS基本定位与高级定位示例

[ 录入者:91ctc | 时间:2012-04-20 13:13:45 | 作者: 91ctc| 来源:本站原创 | 浏览: 次 ]

1、CSS基本定位的语法:

position:value

top:value

left:value

width:value

height:value

基本定位范例:

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>      
  3. <style type="text/css">      
  4. <!--       
  5. .self{       
  6. position:absolute;   
  7. top:50px;   
  8. left:50px;   
  9. width:300px;   
  10. height:100px;     
  11. }       
  12. -->      
  13. </style>  
  14. </head>  
  15. <body>    
  16. ……       
  17.   <div class="self">  
  18.   <table>  
  19.   <tr>……</tr>  
  20.   </table>  
  21.   </div>  
  22. ……       
  23. </body>  
  24. </html>  

2、CSS高级定位的语法:

z-index:value

clip:value

overflow:value

visibility:value

z-index的值高的元素会覆盖值比较低的元素

clip裁剪出的区域为矩形,只要设定两个点即可,一个是矩形左上角的顶点,由top和right两项设置完成;另一个是右下角的顶点,由bottom和right两项设置完成,overflow属性用于设置溢出时的显示方式overflow属性值如下表所示:

visible
无论层(DIV)的大小,内容都会显示出来
hidden
会隐藏超出层(DIV)大小的内容
scroll
不管内容是否超出层(DIV)的范围,选中此项都会为层(DIV)添加滚到条
auto
只在内容超出层(DIV)的范围时才显示滚动条

visibility用来设置嵌套层的显示,嵌套层是插入在其它层中的层,分为嵌套的层(子层)和被嵌套的层(父层),visibility的属性值如下表所示:

inherit
子层继承父层的可见性,即父层可见子层也可见;父层不可见,子层也不可见
visible
无论父层是否可见,子层都可见
hidden
无论父层是否可见,子层都隐藏

高级定位范例:

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>      
  3. <style type="text/css">      
  4. <!--       
  5. .self{       
  6. position:absolute;   
  7. top:50px;   
  8. left:50px;   
  9. width:500px;   
  10. height:300px;    
  11. overflow:auto;   
  12. z-index:1;   
  13. visibility:visible;   
  14. }       
  15. -->      
  16. </style>  
  17. </head>  
  18. <body>    
  19. ……       
  20.   <div class="self">  
  21.   <table>  
  22.   <tr>……</tr>  
  23.   </table>  
  24.   </div>  
  25. ……       
  26. </body>  
  27. </html>  

 

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号