CSS定位机制-层定位

最新推荐文章于 2020-07-05 17:51:07 发布

kenny.feng

最新推荐文章于 2020-07-05 17:51:07 发布

阅读量921

点赞数

本文链接：https://blog.csdn.net/fenganhai/article/details/105524079

版权

层定位

概念：元素的位置重合，也没关系，即“可层叠”

本质：相对于谁定位，且先浮动起来，再定位

形式：

（1）固定定位(position: fixed)

（2）相对定位(position: relative)

（3）绝对定位(position: absolute)

position:static不属于“层定位”，这是默认的position值，属于“文档流定位”，即“文档流定位”的position为static（只是一般都省略不写）

一、固定定位（fixed）

作用：相对于屏幕内的网页窗口本身。它不会随浏览器窗口的滚动条滚动而变化。相当于将该元素冻结在网页界面

二、相对定位（relative）

作用：相对于其直接父元素进行定位（无论其父元素是什么定位方式），且原来的位置保留（即原来的位置不会被其它元素填充，“占着原来的坑不拉屎”，“离开了原来的位置还不让别人去占”）。

三、绝对定位（absolute）

作用：相对于其最接近的一个具有“定位属性（relative/absolute）”的父元素进行定位（即不一定是直接父元素）。如果不存在，则相对于body元素，即相对于浏览器窗口。且原来的位置不保留（即原来的位置会被其它元素填充，“一个萝卜一个坑“，“离开了原来的位置就会被别人占”）

relative+absolute应用

需求：父元素相对定位，子元素可以跟随这个父元素进行移动而移动

例如：父div移动，子div跟着移动，且子div在父div中的位置保持不变

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   *{
      margin: 0;
      padding: 0;
   }
   div{
       border:2px red solid;
       color: black;             /* div中的文字颜色 */
   }
   #box1{
       width:150px;
       height:150px;

       position:relative;       /* 父元素：相对定位 */
   }
   #box2{
       width:98%;
      position:absolute;    /* 子元素：绝对定位 */
      bottom:0;
   }
</style>
</head>
<body>

<div id="box1">
    <div id="box2">kenny.feng</div>
</div>

</body>
</html>

在父元素中添加：

left: 100px;
top: 100px;

则子div跟随父div的移动而移动：