第六天_定位-优快云博客

本文链接：https://blog.youkuaiyun.com/ww_Filling_it/article/details/124414288

本文深入探讨了CSS中的四种定位方式：静态定位、相对定位、绝对定位和固定定位，详细阐述了它们的特点和应用场景。通过具体的QQ图标和哆啦A梦形象的案例，展示了如何利用边偏移和z-index实现元素精确定位和层次控制，以达到复杂布局的设计需求。

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

一、静态定位默认

二、相对定位relative

1.参考物：定位前的位置

2.特点

不影响元素本身特性
元素不脱离文档流
相对于原来的位置进行偏移

三、绝对定位

1.参考物：最近的使用了定位的父级，如果没有找body

2.特点

元素脱离文档流
行元素支持所有css样式
块元素内容撑开宽高
清除子级浮动

四、固定定位

1.参考物：浏览器窗口

2.特点

脱离文档流
清除子级浮动

五、作用

可以使用边偏移描述：left top bottom right
可以使用z-index提升层级

六、万能居中公式

定位

left：50%

top：50%

margin-left：-width/2

margin-top：-width/2

案例一：qq图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .qq {
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
    }

    .qq div {
        position: absolute;
    }

    .body {
        width: 200px;
        height: 320px;
        background-color: #111;
        border-radius: 100px;
        left: 100px;
        top: 40px;
        overflow: hidden;
        z-index: 1;
    }

    .eye {
        width: 30px;
        height: 50px;
        background-color: #fff;
        border-radius: 50%;
        top: 40px;
        left: 60px;
    }

    .eye div {
        width: 16px;
        height: 20px;
        border-radius: 50%;
        background-color: #111;
        left: 10px;
        top: 20px;
    }

    .eye2 {
        left: 110px;
    }

    .eye2 div {
        left: 4px;
        /* top: 26px; */
        background-color: transparent;
        border-top: 2px solid #111;
    }

    .zui {
        width: 120px;
        height: 24px;
        background-color: goldenrod;
        left: 40px;
        top: 98px;
        border-radius: 50%;
    }

    /* .zui div {
        width: 120px;
        height: 24px;
        background-color: pink;
        top: 10px;
    } */
    .wb {
        width: 220px;
        height: 150px;
        background-color: transparent;
        border: 40px solid tomato;
        border-radius: 50%;
        left: -50px;
        top: -50px;
        z-index: 1;
    }

    .wb2 {
        width: 40px;
        height: 60px;
        background-color: tomato;
        left: 30px;
        top: 160px;
        z-index: 1;
    }

    .dp {
        width: 160px;
        height: 150px;
        background-color: #fff;
        border-radius: 80px;
        left: 20px;
        top: 150px;
    }

    .arm {
        width: 145px;
        height: 40px;
        background-color: #111;
        border-radius: 50%;
        left: 20px;
        top: 218px;

    }

    .arm1 {
        transform: rotate(-60deg);
    }

    .arm2 {
        left: 240px;
        transform: rotate(60deg);
    }

    .foot {
        width: 100px;
        height: 30px;
        background-color: goldenrod;
        left: 120px;
        top: 340px;
        border-radius: 50%;
    }

    .foot1 {
        transform: rotate(-10deg);
    }

    .foot2 {
        left: 180px;
        transform: rotate(10deg);
    }
</style>

<body>
    <div class="qq">
        <div class="body">
            <div class="eye eye1">
                <div></div>
            </div>
            <div class="eye eye2">
                <div></div>
            </div>
            <div class="zui"></div>
            <div class="wb"></div>
            <div class="wb2"></div>
            <div class="dp"></div>
        </div>
        <div class="arm arm1"></div>
        <div class="arm arm2"></div>
        <div class="foot foot1"></div>
        <div class="foot foot2"></div>
    </div>
</body>

</html>

实现结果如下：

案例二：多来A梦

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .dlam {
        width: 400px;
        height: 400px;
        background-color: pink;
        position: relative;
    }

    .dlam div {
        position: absolute;
    }

    .tou {
        width: 372px;
        height: 350px;
        background-color: #00acd7;
        border-radius: 45%;
        left: 14px;
        top: 25px;
    }

    .face {
        width: 308px;
        height: 220px;
        border-radius: 154px;
        background-color: #fff;
        left: 43px;
        top: 110px;

    }

    .eye {
        height: 100px;
        width: 84px;
        border: 2px solid #000;
        border-radius: 40%;
        background-color: #fff;
        left: 108px;
        top: 65px;
    }

    .eye div {
        width: 16px;
        height: 16px;
        background-color: #000;
        border-radius: 50%;
        left: 58px;
        top: 46px;
    }

    .eye2 {
        left: 196px;
    }

    .eye2 div {
        left: 8px;
    }

    .bz {
        width: 35px;
        height: 35px;
        border: 2px solid #000;
        background-color: #cc3304;
        border-radius: 40%;
        left: 176px;
        top: 155px;
    }

    .line {
        height: 112px;
        width: 4px;
        background-color: #000;
        left: 192px;
        top: 193px;
    }

    .huzi {
        width: 254px;
        height: 254px;
        border-bottom: 4px solid #000;
        border-radius: 50%;
        left: 65px;
        bottom: 92px;
    }
</style>

<body>
    <div class="dlam">
        <div class="tou"></div>
        <div class="face"></div>
        <div class="eye eye1">
            <div></div>
        </div>
        <div class="eye eye2">
            <div></div>
        </div>
        <div class="bz"></div>
        <div class="line"></div>
        <div class="huzi"></div>
    </div>
</body>

</html>

实现结果如下：