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

亦凉 2021-05-03 04:23 637阅读 0赞

## 1、绝对定位： ##

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

## 2、相对定位： ##

依然占用静态定位的空间，但是可以使用left right top bottom这几个属性做偏移

## 2、手撕代码： ##

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绝对定位</title> <style type="text/css"> .div1{ 
                background-color: red;
                width: 400px;
                height: 400px;
                position: relative;
                left: 500px;
            }
    
            .div2{ 
                position: absolute;
                background-color: black;
                width: 200px;
                height: 200px;
                left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
    
            </div>
        </div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/4ef8f3724bd548f5a1821a8d1402d1e1.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关关于css的绝对定位，相对定位

关于css的绝对定位，相对定位相对定位（ relative）：使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。移动元素会导致它覆盖其它框。绝对定位（abs

青旅半醒/ 2022年12月04日 01:22/ 0 赞/ 286 阅读

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

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

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

相关绝对定位和相对定位详解

层级关系为： <div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物 <div—————————-没有设置为定位元素

蔚落/ 2022年08月20日 07:25/ 0 赞/ 307 阅读

相关详解CSS的相对定位和绝对定位

详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正

淡淡的烟草味﹌/ 2022年06月15日 04:07/ 0 赞/ 309 阅读

相关 CSS相对定位和绝对定位详解

相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： <table>

ゞ浴缸里的玫瑰/ 2022年06月08日 22:11/ 0 赞/ 622 阅读

相关 DIV+CSS绝对定位和相对定位详解

本文和大家重点讨论一下DIV+CSS之绝对定位和相对定位，在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位

￡神魔★判官ぃ/ 2022年04月21日 14:18/ 0 赞/ 353 阅读

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

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

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