CSS 定位 position

最新推荐文章于 2023-06-22 23:21:52 发布

houyanhua1

最新推荐文章于 2023-06-22 23:21:52 发布

阅读量359

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/houyanhua1/article/details/78428248

版权

本文探讨了CSS中的定位技术，重点讲解了内层元素如何使用绝对定位(absolute)以及固定定位(fixed)。通过示例展示了如何利用top和right属性设置元素的位置，如创建一个始终位于屏幕右侧下方的联系客服QQ图标。

摘要由CSDN通过智能技术生成

position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边
static 静态，不定位
fixed
固定，脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。
relative
相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置）
absolute
绝对定位，相对于最近的具有定位属性（不管是相对定位，或者绝对定位都可以）的元素进行定位。
脱离正常文档流，层级高于普通元素。（不霸道，其他元素会占据它原来的位置）
相对于它的祖先，有定位属性(relative 或 absolute)的祖先。如果没有，相对于body定位。

备注：相对定位与绝对定位,外层元素(祖先标签)通常设置相对定位(relative)，不用坐标(top left)。

内层元素设置绝对定位(absolute)。配合着定位坐标(top left)。

position: fixed ; top:50px; right:100px; (实例：联系客服qq)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset&#