当前位置:Gxlcms > 前端框架 > CSS如何进行绝对定位

CSS如何进行绝对定位

时间:2021-07-01 10:21:17 帮助过:477人阅读

absolute属性表示绝对定位,通过top、left、bottom、right值来设置它们相对于最近的祖先元素的位置

【推荐课程:CSS教程

绝对定位元素的位置与文档流无关,因此它不占据任何空间。当一个元素被设置为绝对定位时将会从文档流中完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块

例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. div{width:100px;
  8. height: 100px;
  9. background-color: pink;
  10. }
  11. .child{
  12. position: absolute;
  13. background-color: skyblue;
  14. top:50px;
  15. left: 50px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <div>父元素
  21. <div>子元素</div>
  22. </div>
  23. </body>
  24. </html>

效果图:

由以上的示例可以看出绝对定位就是相对于最近的祖先元素,如果元素没有已定位的祖先元素,则会相对于最初的包含块(画布或HTML元素)

注意:绝对定位与文档流无关,所以它可以覆盖页面上的元素,所以我们可以设置z-index 属性来控制内容的堆放次序

以上就是CSS如何进行绝对定位的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行