css3之position相对定位和绝对定位以及固定定位的区别

最新推荐文章于 2024-05-23 18:22:53 发布

weixin_43343144

最新推荐文章于 2024-05-23 18:22:53 发布

阅读量1k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/weixin_43343144/article/details/88813663

版权

CSS3 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

相对定位：相对定位：相对于自己原来的位置！

绝对定位：绝对定位：相对于最近的非static定位(有定位的)祖先元素

* {
    // 默认值：无任何定位
    position: static;
    // 相对定位：相对于自己原来的位置！
    position: relative;
    // 绝对定位：相对于最近的非static定位(有定位的)祖先元素
    position: absolute;
    // 固定定位：相对于屏幕视口（viewport）的位置！
    position: fixed;
}

<body>
    <div class="div1">
        <div class="div2">
            <div class="div3"></div>
        </div>
    </div>
</body>

这个案例很好的解释绝对定位：相对于最近的非static定位(有定位的)祖先元素

这里的关键是div2，div2没有设置任何定位，就是非static定位，那么div3就相当于div1(最近的有定位的祖先)来定位！

.div1 {
  width: 500px;
  height: 300px;
  background: red;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -150px;
}

.div2 {
  width: 100px;
  height: 200px;
  background: blue;
  margin: 20px;
}

.div3 {
  width: 200px;
  height:100px;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;

}

weixin_43343144

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3之position相对定位和绝对定位以及固定定位的区别

相对定位：相对定位：相对于自己原来的位置！绝对定位：绝对定位：相对于最近的非static定位(有定位的)祖先元素* { // 默认值：无任何定位 position: static; // 相对定位：相对于自己原来的位置！ position: relative; // 绝对定位：相对于最近的非static定位(有定位的)祖先元素 pos...
复制链接

扫一扫