当前位置: 首页 > Web前端 > HTML5

程序员好web前端教程分享CSS在web中的绝对定位

时间:2023-04-04 22:47:13 HTML5

今天好程序员web前端教程就给大家分享一下CSS在web中绝对定位的教程  绝对定位使得位置元素独立于文档流,因此不占用空间。这不同于相对定位,它实际上被认为是正常流定位模型的一部分,因为元素的位置是相对于它在正常流中的位置的。  正常流中的其他元素的布局就好像绝对定位元素不存在一样:  #box_relative{  position:absolute;  left:30px;  top:20px;  }  如下图所示:  绝对定位元素的位置是相对于最近定位的祖先元素。如果元素没有定位的祖先元素,那么它的位置是相对于原始包含块的。  定位的主要问题是记住每个定位的含义。那么,现在让我们回顾一下我们所学的内容:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近定位的祖先元素,如果不存在定位的祖先元素,则“相对”到”原始包含块。  注意:根据用户代理,初始包含块可能是画布或HTML元素。  Tip:因为绝对定位框与文档流无关,所以可以覆盖页面上的其他元素。这些盒子的堆叠顺序可以通过设置z-index属性来控制。