Day6_0424 定位（position）

阿拉灯神丁吖

已于 2022-04-27 20:38:28 修改

阅读量51

点赞数

文章标签： html

于 2022-04-24 22:35:23 首次发布

本文链接：https://blog.csdn.net/weixin_52335062/article/details/124393118

版权

一、静态定位 static：默认定位方式。

二、相对定位 relative：

1、参考物：定位前的位置；

2、特点：不影响元素本身特性；

元素不脱离文档流；

相对于原位置进行偏移。

<!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>relative</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 10px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
        }
        .second {
            position: relative;
            right: 30px;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="second">2</div>
    <div>3</div>
</body>
</html>

三、绝对定位 absolute：

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

2、特点：元素脱离文档流；

行元素支持所有css样式；

块元素内容撑开宽高；

清除子级的浮动。

<!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>absolute</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .d1 {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: cyan;
            overflow: hidden;
            margin-left: 50px;
        }
        .d2 {
            position: fixed;
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: gold;
            overflow: hidden;
        }
        .d3 {
            width: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
        }
        span {
            float: left;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <div class="d3">
                <span>1</span>
                <span>2</span>
            </div>
        </div>
    </div>
</body>
</html>

四、固定定位 fixed：

1、参考物：浏览器窗口；

2、特性：脱离文档流；

清除子级浮动。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 300px;
            position: fixed;
            top: 260px;
            background-color: cyan;
        }
        .left {
            left: 10px;
        }
        .right {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
</html>

五、作用：

1、可以使用偏移描述：left、top、right、bottom。

2、可以使用z-index提升层级。

六、万能居中公式：

position: absolute;

left: 50%;

top: 50%;

margin-left: -width/2;

margin-top: -height/2;

<!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>万能居中</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bg {
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,.75);
        }
        .alert {
            width: 300px;
            height: 500px;
            background-color: #fff;
            /* 万能居中公式 */
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -250px;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="alert"></div>
    </div>
</body>
</html>

七、案例实现：

1、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>🐧</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .qq{
            width: 500px;
            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;
            background-color: #111;
            border-radius: 50%;
            left: 10px;
            top: 20px;
        }
        .eye2{
            left: 110px;
        }
        .eye2 div{
            left: 4px;
            top: 20px;
            border-top: 5px solid #111;
            background-color: transparent;
        }
        .zui{
            width: 120px;
            height: 24px;
            background-color: goldenrod;
            left: 40px;
            top: 98px;
            border-radius: 50%;
        }
        .wb {
            width: 220px;
            height: 150px;
            background-color: aqua;
            border: 40px solid tomato;
            background-color: transparent;
            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: 160px;
            background-color: #fff;
            border-radius: 80px;
            left: 20px;
            top: 150px;
        }
        .arm{
            width: 140px;
            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{
            transform: rotate(10deg);
            left: 180px;
        }
    </style>
</head>
<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>

2、哆啦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>哆啦A梦</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .am{
            width: 500px;
            height: 400px;
            background-color: pink;
            position: relative;
            /* z-index: 1; */
        }
        .am div{
            position: absolute;
        }
        .tou {
            width: 400px;
            height: 380px;
            border-radius: 300px;
            background-color: #00b9e8;
            border: 2px solid #40626a;
            left: 50px;
            top: 10px;
            /* z-index: 1; */
        }
        .eye {
            width: 85px;
            height: 100px;
            border-radius: 30px;
            background-color: #fff;
            border: 2px solid #111;
            top: 60px;
            left: 160px;
            z-index: 1;
        }
        .eye div{
            width: 15px;
            height: 15px;
            background-color: #111;
            border-radius: 50%;
            left: 60px;
            top: 50px;
        }
        .eye2{
            left: 249px;
        }
        .eye2 div{
            left: 10px;
        }
        .bz {
            width: 40px;
            height: 40px;
            background-color: #cc3304;
            border: 2px solid #111;
            border-radius: 20px;
            left: 227px;
            top: 152px;
            z-index: 1;
        }
        .face{
            width: 310px;
            height: 230px;
            background-color: #fff;
            border-radius: 200px;
            top: 110px;
            left: 95px;
        }
        .zui{
            width: 270px;
            height: 207px;
            border-bottom: 2px solid #111;
            border-radius: 50%;
            left: 115px;
            top: 110px;
        }
        .hz{
            width: 2px;
            height: 123px;
            background-color: #111;
            top: 195px;
            left: 250px;
        }
    </style>
</head>
<body>
    <div class="am">
        <div class="tou"></div>
        <div class="eye eye1">
            <div></div>
        </div>
        <div class="eye eye2">
            <div></div>
        </div>
        <div class="bz"></div>
        <div class="face"></div>
        <div class="zui"></div>
        <div class="hz"></div>
    </div>
</body>
</html>

阿拉灯神丁吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day6_0424 定位（position）

一、静态定位 static：默认定位方式。二、相对定位 relative：1、参考物：定位前的位置；2、特点：不影响元素本身特性；元素不脱离文档流；相对于原位置进行偏移。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫