CSS定位详解-CSDN博客

本文链接：https://blog.csdn.net/cxycxytony/article/details/108045562

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        相对定位：
            相对于自己原来的位置进行偏移
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 15px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
        }
        #first{
            background-color: #ab480e;
            border: 1px #12aa17 dashed;
            position: relative; /*相对定位,上下左右*/
            top: -20px;
            left: 20px;
         }
        #second{
            background-color: #12aa17;

            border: 1px #aa0012 dashed;
        }
        #third{
            background-color: #27a3ab;
            border: 1px #0048aa dashed;
            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：上
left： 左
bottom：下
right：右

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #father{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            padding: 3px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: #ffa1f2;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #47a4ff;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top:-100px
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="father">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>
</body>
</html>

在这里插入图片描述

6.2、绝对定位

定于：基于xxx定位，上下左右~

没有父元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对父级元素进行便宜
在父级元素范围内移动

绝对定位：position: absolute;
相对于父级或浏览器的位置，进行指定的便宜，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 15px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px #666 solid;
            position: relative;
        }
        #first{
            background-color: #ab480e;
            border: 1px #12aa17 dashed;
        }
        #second{
            background-color: #12aa17;
            border: 1px #aa0012 dashed;
            position: absolute;
            right: 30px;
            top: -10px;
        }
        #third{
            background-color: #27a3ab;
            border: 1px #0048aa dashed;
        }
    </style>
</head>
<body>

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

</body>
</html>

6.3、固定定位 fixed

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

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

</body>
</html>

6.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="images/1.jpg"></li>
        <li class="tipText">好好学习</li>
        <li class="tipBg"></li>
        <li>时间：2020</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 250px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000;
}
ul,li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 250px;
    height: 25px;
    top: 124PX;
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background-color: black;
    opacity: 0.1; /*背景透明度*/

}