CSS——定位

小吴在敲Bug

已于 2022-06-01 00:02:57 修改

阅读量114

点赞数

分类专栏： CSS 文章标签： css css3 html

于 2022-06-01 00:02:17 首次发布

本文链接：https://blog.csdn.net/qq_45042462/article/details/125074383

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

1、相对定位
- 1.1、方块定位练习
2、绝对定位
3、固定定位fixed
3、z—index

1、相对定位

position: relative;
相对原来的位置，进行指定的偏移，它任然在标准文档流中，原来的位置会被保留
加上负号向指定的偏移
上：top: -20px;
左：left: 20px;
下：bottom: -10px;
又：right: 20px;

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

        <!--
            相对定位
                相对于自己的位置进行偏移
        -->
        <style>
            body{
                margin: 20px;
            }

            div{
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
                border: 1px solid #666;
            }

            #first{
                background: #5454ad;
                border: 1px dashed #871c1c;
                position: relative; /*相对定位：上下左右*/
                top: -20px;
                left: 20px;
            }

            #second{
                background: #71717d;
                border: 1px dashed #00af32;
                position: relative;
                bottom: 10px;
                right: 20px;
            }

            #third{
                background: #5c5c79;
                border: 1px dashed #2550bf;
            }

        </style>
    </head>
    <body>

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

在这里插入图片描述

1.1、方块定位练习

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

        <style>
            #father{
                border: 2px solid #ff0000;
                width: 300px;
                height: 300px;
                padding: 10px;
            }
            a{
                text-decoration: none;
                background: #de07f5;
                color: #ffffff;
                display: block;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                font-size: 30px;

            }
            a:hover{
                background: #2550bf;
            }
            #a2,#a4{
                position: relative;
                top: -100px;
                right: -200px;
            }

            #a5{
                position: relative;
                top: -300px;
                right: -100px;
            }
        </style>

    </head>
    <body>
        <div id="father">
            <a href="1" id="a1">链接1</a>
            <a href="2" id="a2">链接2</a>
            <a href="3" id="a3">链接3</a>
            <a href="4" id="a4">链接4</a>
            <a href="5" id="a5">链接5</a>
        </div>
    </body>
</html>

在这里插入图片描述

2、绝对定位

position: absolute;
定位：基于XXX对位，上下左右
1. 没有父及元素定位的前提下，相对浏览器定位
2. 假设父级元素存在定位，通常会相对父级元素进行偏移

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

        <!--
            相对定位
                相对于自己的位置进行偏移
        -->
        <style>
            body{
                margin: 20px;
            }

            div{
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
                border: 1px solid #666;
                position: relative;
            }

            #first{
                background: #5454ad;
                border: 1px dashed #871c1c;

            }

            #second{
                background: #71717d;
                border: 1px dashed #00af32;
                position: absolute;
                left: 100px;
                top: -10px;
            }

            #third{
                background: #5c5c79;
                border: 1px dashed #2550bf;
            }

        </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;
                position: absolute;
                background: red;
                right: 0;
                bottom: 0;
            }
            div:nth-of-type(2){/*fixed*/
                width: 50px;
                height: 50px;
                background: yellow;
                position: fixed;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body>

        <div>div1</div>
        <div>div2</div>
    </body>
</html>

在这里插入图片描述

3、z—index

图层
1. z-index：默认是0，最高无限

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #content{
                width: 300px;
                padding: 0;
                margin: 0;
                overflow: hidden;
                font-size: 12px;
                line-height: 25px;
                border: 1px black solid;
            }
            ul,li{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            /*父级元素相对定位*/
            #content ul{
                position: relative;
            }

            .tipText,.tipBg{
                position: absolute;
                width: 380px;
                height: 25px;
                top: 279px;
            }

            .tipText{
                /*z-index: 1;*/
                color: white;
            }

            .tipBg{
                background: black;
                opacity: 0.5;   /*背景透明度*/
            }

        </style>
    </head>
    <body>

        <div id="content">
            <ul>
                <li><img src="1.png" alt=""></li>
                <li class="tipText">热爱生活，努力学习</li>
                <li class="tipBg"></li>
                <li>时间：2022-5-31</li>
                <li>地点：7E523</li>
            </ul>
        </div>
    </body>
</html>