relative、absolute定位居中以及小总结

最新推荐文章于 2023-01-26 15:11:02 发布

会过敏的企鹅

最新推荐文章于 2023-01-26 15:11:02 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： HTML CSS

本文链接：https://blog.youkuaiyun.com/qq_43623306/article/details/90605477

前端专栏收录该内容

28 篇文章

订阅专栏

本文总结了CSS中的relative和absolute定位特点，relative定位不影响元素大小，常用于微调，而absolute定位完全脱离文档流，适用于子元素相对于父元素定位。通过设置left、right、top、bottom和margin可以实现元素的居中效果。若不指定宽度，只设置left和right，元素会被拉伸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

relative、absolute 定位小总结:

一、relative 定位总结:

特点:

1.除了位置被left等四个属性影响,对元素没有任何影响(大小)

2.只设置position属性,元素没有任何变化

3.元素的参照位置是自身的初始位置

4.定位偏移后,元素的位置会被保留

5.定位元素会被提升层级,会遮挡没有定位的元素;如果都有定位,下面的元素层级会大于上面的元素

使用场景:

1.一定不能代替padding或者margin大面积使用

2.没有依赖关系的元素,可以用相对定位做位置的微调

3.只要能用padding,margin,floa解决的就不用relative定位

存在价值:

配合绝对定位(absolute)使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>relative相对定位</title>
    <style>
        .box {
            border: 1px solid red;          
        }
        .box div {
            background-color: green;
        }
        /* 每个元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性 */
        div.div1 {
            background: #0000ff;
            left: 10px;
            top: 200px;
            position: relative;
        }
        div.div2 {
            background:yellow;
            position: relative;
            top: 10px;
        }
        div.div3 {
            background:red;
            position: relative;
            /* top: 10px; */
        }
    </style>
</head>
<body> 
        
    <div class="box">
        <div class="div1">
            div1
        </div>
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
            </div>
        <div class="div4">
            div4
        </div>
        
    </div>
</body>
</html>

如图所示:

二、absolute 定位总结:

绝对定位特点:(和浮动类似)

1.块元素或者内联元素,设置绝对定位以后,都变成了内容撑起大小,支持宽高等设置

(修改了元素的特性,变成了定位元素！)

2.完全脱离了文档流,层级提升了

3.不能解决父元素高度塌陷问题(不能乱用)

参照：

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

使用技巧:

子元素使用绝对定位absolute父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>absolute绝对定位</title>
    <style>
         .box {
            border: 1px solid rgb(12, 7, 7);
            /* 让绝对定位的子元素参照自己 
                使用relative原因是相对定位不会对元素产生其他影响 
            */
            position: relative; 
            width: 200px;
            height: 200px;        
        }
        .box div {
            background-color: green;
            position: absolute;
            width: 50px;
            height: 50px;
        }
        div.div1 {
            background-color: #0000ff;
            color: #fff;
            position: absolute;

        }
        div.div2 {
            background: #cccccc;
           right: 0px;
           top: 0px; 
           z-index: 777;
        }
        div.div3 {
            background: yellow;
           left: 0px;
           bottom: 0px; 
        }
        div.div4 {
            background: pink;
           right: 0px;
           bottom: 0px; 
        }
        div.div5 {
            background: red;
          left: 75px;
          top: 75px;
        }
    </style>
</head>
<body>
 
    <div class="box">
        <div class="div1">
            div1
        </div>
        <div class="div2">
            div2
        </div>
        <div class="div3">
            div3
            </div>
        <div class="div4">
            div4
        </div>
        <div class="div5">
            div5
        </div>
    </div>   
</body>
</html>

如图所示:

利用定位实现居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        .box1 {
            width: 500px;
            height: 500px;
            margin: auto;
            border: 1px solid red;
            position: relative;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            定位居中
        </div>
    </div>
</body>
</html>

如图所示: