HTML(Basic) Chapter6(Pink)定位

最新推荐文章于 2022-12-11 21:45:50 发布

FeverTwice

最新推荐文章于 2022-12-11 21:45:50 发布

阅读量421

点赞数

分类专栏： CSS之路 HTML之路文章标签： html css css3 定位前端

本文链接：https://blog.csdn.net/LeungSr/article/details/118897342

版权

HTML之路同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

CSS之路

27 篇文章 0 订阅

订阅专栏

1.基础知识

1.1为什么需要定位技术

使用标准流以及浮动难以完成让盒子自由地在某个盒子内部移动位置或者固定在屏幕中的某个位置，并可以压住其他盒子

1.2什么是定位

定位=定位模式+边偏移
分为：静态定位、相对定位、绝对定位以及固定定位

定位的方法

1.静态定位（元素默认）

选择器 { position: static;}

静态定位按照标准流的特性位置摆放，它没有边偏移
静态定位在布局时候较少用到

2.相对定位

选择器 { position: relative;}

自恋型定位
是相对于它原来的位置来说的
虽然这个盒子是走了的，但其位置还是保留，其他的盒子没有办法上升

源代码（相对.html）

<!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>
        .box1 {
            position: relative;
            top: 100px;
            left: 100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

最终效果

3.绝对定位

选择器 {position:absolute;}

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位
即使页面缩放，也会随着缩放后的浏览器定位
绝对定位的高度很高（比浮动要高），可以随意移动位置（脱标）

源代码（绝对.html）

<!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>
        .son {
            position: absolute;
            top: 100px;
            right: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

最终效果

父亲没有加定位

父亲加了定位后

就近原则：跟最近的一级父元素的定位为准

4.固定定位

选择器 { position:fixed; }

以浏览器的可视窗口为参照点移动元素
跟父元素没有啥关系
固定定位不占有原来的位置
固定定位还可以贴在我们版心的位置

固定在板心右侧的算法

让盒子固定定位在left%50可以走到浏览器的可视区的一半的位置
让固定定位的盒子margin-left走板心宽度一半的距离

源代码（固定.html）

<!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>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            position: fixed;
            /* 1.走浏览器宽度的一半 */
            left: 50%;
            margin: 405px;
            width: 50px;
            height: 150px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>
</body>

</html>

最终效果

5.子绝父相

孩子是绝对的，可以游来游去
父元素必须要加上定位，但是不能加绝对定位（不占位置），使用相对定位就可以占有盒子，不影响页面的布局

儿子元素使用绝对定位，父亲元素使用相对定位

6.粘性定位

定位的特点

以浏览器的可视窗口为参照的元素（固定定位特点）
年薪定位占有原先的位置（相对定位的特点）
必须添加上下左右
当阶段的开发用的少

源代码（粘性.html）

<!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>
        body {
            height: 3000px;
        }

        .nav {
            /* 粘性定位 */
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏</div>
</body>

</html>

最终结果

7.定位的叠放次序

选择器 { z-index: 1;}

数值可以是正整数、负数或0，默认是auto，数值越大，盒子越靠上（权值越大）
只有定位的盒子才有属性
数值权重后面不能够加单位
如果属性值（权重）相同，则后来者居上

<!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>
        .box {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
        }

        .xiongda {
            z-index: 1;
            background-color: red;
        }

        .xionger {
            z-index: 2;
            background-color: blue;
            left: 50px;
            top: 50px;
        }

        .guangtouqiang {
            background-color: green;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <!-- 第三个盒子在上面（后来者居上） -->
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box guangtouqiang">光头强</div>
</body>

</html>

最终效果

8.绝对定位的盒子水平居中

加了绝对定位的盒子是不能通过margin来进行水平居中的
left先走50%
在往回走盒子的宽的一半
这个效果是动态的，会根据浏览器窗口的大小自动调节

<!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>
        .box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin: auto; */

            /* 1.left走50% */
            left: 50%;
            /* 负值往左走自己盒子的宽度的一半 */
            margin-left: -100px;

            top: 50%;
            margin-top: -100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>