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

2022-12-9

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.

【编辑推荐】

  1. CSS绝对定位和相对定位的区别
  2. DIV+CSS中最小高度min-height设定
  3. CSS中border和clear两大属性用法揭秘
  4. 实现DIV居中布局三种途径
  5. 解读DIV CSS网页布局中CSS无效十个原因

 

 

版权声明：
作者：后浪云
链接：https://www.idc.net/help/396972/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图