相对定位、绝对定位、固定定位和z-index

最新推荐文章于 2024-09-28 15:01:31 发布

q1575290554

最新推荐文章于 2024-09-28 15:01:31 发布

阅读量217

点赞数

分类专栏：前端 # css

本文链接：https://blog.csdn.net/Q1575290554/article/details/125477129

版权

相对定位绝对定位固定定位 z-index CSS布局

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

1、相对定位

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>Title</title>

    <!-- 相对定位
    相对于自己原来的位置进行偏移-->
    <style>
        body{
            padding: 50px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
        }
        #first{
            background-color: green;
            border: 1px dashed green;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: -20px;
        }
        #second{
            background-color: blue;
            border: 1px dashed blue;
        }
        #third{
            background-color: red;
            border: 1px dashed red;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>

</head>
<body>

<div id=""father"">
    <div id=""first"">第一个盒子</div>
    <div id=""second"">第二个盒子</div>
    <div id=""third"">第三个盒子</div>
</div>

</body>
</html>

相对定位：position: relative;

相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置会被保留。

top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20*/
bottom: -20px;/*向下偏移20px*/
right: 20px;/*向左偏移20px*/

2、绝对定位

定位：基于xxx定位。上下左右

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内

相对于父级或浏览器的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #000000;
            padding: 0;
            /*父级元素加了一个定位，那么 second 就相对于父级元素定位*/
            position: relative;
        }
        #first{
            background-color: green;
            border: 1px dashed green;
        }
        #second{
            background-color: blue;
            border: 1px dashed blue;
            /*如果父级元素没有定位，就跟着浏览器大小动，相对于浏览器定位*/
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: red;
            border: 1px dashed red;
        }
    </style>

</head>
<body>

<div id=""father"">
    <div id=""first"">第一个盒子</div>
    <div id=""second"">第二个盒子</div>
    <div id=""third"">第三个盒子</div>
</div>

</body>
</html>

3、固定定位 fixed

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background-color: #006600;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/* fixed */
            width: 50px;
            height: 50px;
            background-color: #0000FF;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

4、z-index

z-index：默认时0，最高无限：999

<!DOCTYPE html>
<html lang=""en"">
<head>
    <meta charset=""UTF-8"">
    <title>Title</title>
    <link rel=""stylesheet"" href=""css/style.css"">
</head>
<body>

<div id=""content"">
    <ul>
        <li><img src=""image/1.jpeg"" alt=""""></li>
        <li class=""tipText"">原地踏步有何意义</li>
        <li class=""tipBg""></li>
        <li>时间：2020年11月28日</li>
        <li>地点：湘潭</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 140px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 140px;
    height: 25px;
    top: 112px;
}
.tipText{
    color: white;
    /*z-index: 999;*/
}
.tipBg{
    background-color: #008800;
    opacity: 0.5;/*背景透明度*/
    /*filter: alpha(opacity=50);*//*古老版本 可能不兼容*/
}