绝对定位 position:absolute，相对定位 position:relative

最新推荐文章于 2021-07-20 13:39:15 发布

无盐海

最新推荐文章于 2021-07-20 13:39:15 发布

阅读量6.9k

点赞数 1

分类专栏： CSS 文章标签： positionabsolute positionrelative

本文链接：https://blog.csdn.net/Fanbin168/article/details/44986585

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

《1》

没有浮动的盒子是一个标准流，而浮动的盒子是一个非标准流。

特别说明：

绝对定位是对离自己最近的那个非标准流盒子而言的。（对一个盒子使用了浮动，相对定位，或者绝对定位，那么这个盒子就变成了一个非标准流的盒子了）

当我们要使用绝对定位的时候，必须要有两个条件
1》必须给父元素加定位属性，一般建议使用 position:relative(即：给父元素设为相对定位);
2》给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）

绝对定位是以父元素为基准点，进行定位（如果他没有父元素，或者它的父元素没有设置position:relative属性）它就会以<body>为基准点进行定位。绝对定位会脱离文档流(即：他浮动起来了，不再占据原来的位置了)

绝对定位

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top:100px;
            left:100px

        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>

《2 给子元素添加绝对定位，不给父元素添加相对定位，那么子元素进行绝对定位就是以body为基准进行定位的》

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        /*position:relative;*/ /*不给父元素设置相对定位，那么子元素就会以body为基准进行定位*/
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top: 100px;
            left: 100px ;
            
            position:absolute; /*给B设置绝对定位*/
        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>

《3最终效果图，给父元素添加相对定位，给子元素添加绝对定位，那么子元素进行绝对定位就是以父元素为基准进行定位的》

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin:0px;
            padding:0px;
        }
        div {
            width: 100px;
            height: 100px;
        }

        #main {
        width:500px;
        height:500px;
        border:1px solid red;
        margin:0px 250px;
        position:relative; /*给父元素设置相对定位，那么子元素进行绝对定位的时候就会以父元素为基准进行定位*/
        }

        #a {
            background-color: red;
        }

        #b {
            background-color: green;
            top: 100px;
            left: 100px ;
            
            position:absolute; /*给B设置绝对定位*/
        }

        #c {
            background-color: blue;
            height:150px;
            width:150px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>
</body>
</html>

相对定位

相对定位是相对于自己原来的位置而言的

当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，

不对B盒子使用相当定位的时候B的位置（如下）

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 100px;
            height: 100px;
        }

        #main {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 0px 250px;
        }

        #a {
            background-color: red;
            float:left;
            margin:10px;
        }

        #b {
            background-color: green;
            float: left;
            margin: 10px;
            /*position:relative;*/  
            /*top:120px;*/ 
            /*left:50px;*/ 
        }

        #c {
            background-color: blue;
            float: left;
            margin: 10px;
        }
    </style>
    
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>  
</body>
</html>

对B盒子进行相对定位的时候B的位置（如下）

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Demo</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 100px;
            height: 100px;
        }

        #main {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            margin: 0px 250px;
        }

        #a {
            background-color: red;
            float:left;
            margin:10px;
        }

        #b {
            background-color: green;
            float: left;
            margin: 10px;
            position:relative;   /*在这里我们使用了对#b元素的相对定位*/
            top:120px;  /*在原来的位置，向下移动120px （如果希望向上移动，则值就是负数，如：top:-120px）*/
            left:50px;  /*在原来的位置，向右移动50px (如果希望向左移动，则值就是负数，如:left:-50px)*/
        }

        #c {
            background-color: blue;
            float: left;
            margin: 10px;
        }
    </style>
    
</head>
<body>
    <div id="main">
        <div id="a">A</div>
        <div id="b">B</div>
        <div id="c">C</div>
    </div>  
</body>
</html>

无盐海

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
绝对定位 position:absolute，相对定位 position:relative

《1》当我们要使用绝对定位的时候，必须要有两个条件1》必须给父元素加定位属性，一般建议使用 position:relative(即：给父元素设为相对定位);2》给子元素，加绝对定位position:absolute（给子元素设置为绝对定位）; 同时加方向属性（top ,left,rigth,bottom）绝对定位是以父元素为基准点，进行定位（如果他没有父元素，或者它的父元素没有
复制链接

扫一扫