CSS定位absolute和relative

最新推荐文章于 2024-07-02 15:12:39 发布

理个以哈呦

最新推荐文章于 2024-07-02 15:12:39 发布

阅读量331

点赞数

分类专栏： css3 position 文章标签： css 浏览器

本文链接：https://blog.csdn.net/qq_15253407/article/details/50596477

版权

css3 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

position

1 篇文章 0 订阅

订阅专栏

absolute绝对定位，分为两种不设置相对点进行定位，设置相对点进行定位，绝对定位的，工作方式相对于设置了position属性的元素进行定位，浏览器会一级一级的向上查找，如果到body最后都没有找到，那就默认是相对于body(整个页面)进行定位，会脱离文档流。

/**不设置任何父元素的属性为position**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style>
    .c1{
      position: absolute;
      width: 600px;
      height: 200px;
      background-color: red;
      top: 50%;
      left: 50%;
      margin-left: -300px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
    <div class="c1"></div>
</body>
</html>

效果图：
这里写图片描述
这里根据定位的工作方式，会向上级查找设置了position的元素，当前demo中的div一直到body都没有设置过position属性，所以div就根据body进行定位，页面的左上角的点就是(0,0)起始位置。

relative 相对定位，多用于辅助绝对定位来使用，当设置相对定位后，元素不会脱离当前的文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <style>
    .c1{
      position: relative;
      width: 800px;
      height: 400px;
      margin: 100px auto;
      background-color: yellow;
    }
    .sub{
      position: absolute;
      width: 600px;
      height: 200px;
      background-color: red;
      top: 50%;
      left: 50%;
      margin-left: -300px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
    <div class="c1">
        <div class="sub"></div>
    </div>
</body>
</html>

效果图：
这里写图片描述
这里面，对sub进行定位，这是浏览器会向上查找父元素，设置了position的元素，正好这里可以找到c1元素设置了position，就是相对于c1元素的左上角进行开始定位，这时sub元素的位置是，不会超出c1元素的。

/**
    区别：
    absolute 会脱离文档流，一共有 top left right bottom这四个属性，这时候float属性就会失效。
    relative 不会脱离文档流，一共有 top left 两个属性，float属性可以使用。
**/

理个以哈呦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录