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

末蓝、 2021-09-18 14:54 466阅读 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;
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，466人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS绝对定位，相对定位

CSS绝对定位，相对定位 1、在绝对定位上显示内容(在要显示的内容上面设置相对定位) <image class="back" src="../../../../

心已赠人/ 2023年07月06日 08:59/ 0 赞/ 11 阅读

相关 CSS定位（相对定位，固定定位，绝对定位）

在CSS中，可以使用position属性来定位元素。position 属性规定元素的定位类型。属性值： absolute：生成绝对定位的元素，相对于 static

刺骨的言语ヽ痛彻心扉/ 2023年01月11日 09:15/ 0 赞/ 189 阅读

相关 CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]

1基础 Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。 Static：默认值，没有定位。 Inherit：继承父

本是古典何须时尚/ 2022年12月23日 11:24/ 0 赞/ 218 阅读

相关 CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位

CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子。定位的组成定位是将盒子定位在某一位置。按照定位的方式

悠悠/ 2022年12月19日 01:18/ 0 赞/ 187 阅读

相关 css中绝对定位和相对定位的区别

上一篇博文中对元素的居中方式进行了总结，其中很多方法中都用到了相对定位和绝对定位，关于这两种定位方式确实是CSS中的一大难点，如果不能深入了解这两种定位方式，进行页面排版时就容

深碍√TFBOYSˉ_/ 2022年12月08日 12:53/ 0 赞/ 276 阅读

相关 css中绝对定位和固定定位的区别

首先我们制作两个标准块级元素，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta

傷城~/ 2022年10月24日 13:21/ 0 赞/ 167 阅读

相关 css绝对定位和相对定位

定位的专业解释（1）语法 position : static | absolute | fixed | relative ( 2 ) 说明从上面语法可以看出，

左手的ㄟ右手/ 2022年09月21日 05:43/ 0 赞/ 314 阅读

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

相对定位：相对定位：相对于自己原来的位置！绝对定位：绝对定位：相对于最近的非static定位(有定位的)祖先元素 { // 默

末蓝、/ 2021年09月18日 14:54/ 0 赞/ 467 阅读

相关 CSS中，position的绝对定位和相对定位的区别

CSS中，position的绝对定位和相对定位的区别 1、position的四个值：static、relative、absolute、fixed 绝对定位：abso

今天药忘吃喽~/ 2021年09月07日 06:05/ 0 赞/ 432 阅读

相关 CSS之绝对定位和相对定位等

1、绝对定位：一种非常随意的定位方式，可以实现div网页的任何一个部位摆放，有点类似于坐标定位。 position:static 静态定位 relative 相对定位 ...

亦凉/ 2021年05月03日 04:23/ 0 赞/ 631 阅读