您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

相对于其容器放置元素

相对于其容器放置元素

您认为CSS定位是正确的做法。这是一个快速的总结:

position: relative将相对于 自身 布置一个元素 换句话说,将元素以常规流程布置,然后将其从常规流程中移除并通过您指定的任何值(顶部,右侧,底部,左侧)偏移。重要的是要注意,因为它已从流中删除,所以周围的其他元素也不会随之移动(如果您希望这种行为,请使用负边距代替)。

但是,您最可能对position: absolute哪个元素相对于容器定位感兴趣。认情况下,容器是浏览器窗口,但是如果父元素具有position: relativeposition: absolute设置在其上,则它将用作为其子元素定位坐标的父元素。

展示:

#container {

  position: relative;

  border: 1px solid red;

  height: 100px;

}



#@R_908_2419@ {

  position: absolute;

  top: 50px;

  left: 20px;

}


<div id="container">

  <div id="@R_908_2419@">absolute</div>

</div>

在该示例中,的左上角#@R_908_2419@将为,其左上角向下为100像素,而的左上角为50像素#container。如果#containerposition: relative设置,则其坐标#@R_908_2419@将相对于浏览器视口的左上角

其他 2022/1/1 18:14:48 有643人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶