html+css(七)

最新推荐文章于 2022-04-14 17:39:42 发布

mzldustu

最新推荐文章于 2022-04-14 17:39:42 发布

阅读量116

点赞数

分类专栏：前端复习文章标签：定位 css css3 html

本文链接：https://blog.csdn.net/qq_45628733/article/details/118751548

版权

前端复习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的定位技术，包括相对定位、绝对定位和固定定位。通过实例详细讲解了如何使用这些定位方式，以及如何调整元素位置和处理层级关系。由于一些突发情况，前端系列文章将暂时中断。

摘要由CSDN通过智能技术生成

这个本来是前天就应该发的，但是被老师交代了一个搭配hadoop环境并且写教程的任务耽搁了，今日继续更前端。

1.1相对定位：

1.以前知识实现box2上去和box1相邻，box3不动
在这里插入图片描述
代码：

<!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>
        body {
            font-size: 60px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 将box2右移 */
            margin-left: 200px;
            /* 在将其上移 */
            margin-top: -200px;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            /* 将box3下移 */
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>

</html>

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>
        body {
            font-size: 60px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 定位position 
            定位是一种更加高级的布局手段
            可以将元素摆放到任意位置
            可选值：
            static默认值，元素静止未开启定位
            relative相对定位
            absolute绝对定位
            fixed固定定位
            sticky粘滞定位

            相对定位：当元素的position属性值设置为relative
            开启相对定位之后要设置偏移量才会有变化
            相对定位会提升元素层级
            相对定位不会使元素脱离文档流
            偏移量：offset
            元素开启后，通过偏移量设置元素位置
            top
            定位元素和定位位置上边的距离
            bottom
            定位元素和定位位置下边的距离
            以上两种一般我们只会使用其中之一
            left
            定位元素和定位位置左侧的距离
            right
            定位元素和定位位置右侧的距离
            也是通常情况下用一个
            left越大越靠右
            以上值生效都要开启定位才能用
            */
            position: relative;
            top: -200px;
            left: 200px;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>

</html>

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>鲁大学生网</title>
    <style>
        body {
            font-size: 60px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 绝对定位，position设置absolute开启绝对定位
            绝对定位的特点：
            开启绝对定位不设置偏移量元素位置不会变化
            开启绝对定位元素会从文档流脱离
            绝对定位会改变元素性质行内变成块，块的宽高被内容撑开
            绝对定位会使元素提升一个层级
            绝对定位元素是相对于其包含块进行定位的
            包含块：(containing block)
            正常情况下：
            包含块就是离当前元素最近的祖先块元素
            <div><div></div></div>
                <div><span><em>hello</div></span></em>
            绝对定位包含块
            包含离他最近的开启了定位的祖先元素
            如果所有祖先元素都没有开启定位则相对于根元素
            */
            position: absolute;
            /* left: 0;
            top: 0; */
            bottom: 0;
            right: 0;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        
        .box4 {
            width: 400px;
            height: 400px;
            background-color: tomato;
        }
        
        .box5 {
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>

    <div class="box3">3</div>
</body>

</html>

1.3固定定位：

这里面这个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>
        body {
            font-size: 60px;
            height: 2000px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 固定定位
            将元素的position属性设置为fixed开启固定定位
            大部分特点和绝对定位一样
            唯一不同的是固定定位永远参照于浏览器可视窗口进行定位
            就是说2的块会一直固定在那不动
            */
            position: fixed;
            left: 0;
            top: 0;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
        
        .box4 {
            width: 400px;
            height: 400px;
            background-color: tomato;
        }
        
        .box5 {
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>

    <div class="box3">3</div>
</body>

</html>

在这里插入图片描述

1.4绝对定位元素的位置

<!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>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: orange;
            position: relative;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            margin-top: auto;
            margin-bottom: auto;
            /* 水平布局
            left+ margin-left + boder-left +padding-left +width  + padding-right + border-right + margin-right +right 包含块的宽度
            当我们开启了绝对定位
            水平方向要添加left和right两个值
            规则和之前一样只是多添加了两个值
            当发生过度约束时
            如果9个值没有auto则自动调整right使等式满足
            如果有auto，则自动调整auto值使等式满足

            可设置auto
            margin width left right
            垂直方向也必须满足
            top+ margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度

            */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>

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

</body>

</html>

在这里插入图片描述

1.5元素的层级

<!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>
        body {
            font-size: 60px;
        }
        
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 开启绝对定位 */
            position: absolute;
            /* 对于开启了定位元素，可以通过z-index指定层级
            z-index需要一个整数作为参数，值越大元素层级越高
            元素层级越高越优先显示
            祖先元素层级再高，也不会盖住后代元素
            */
            z-index: 1;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: rgba(255, 0, 0, .3);
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 2;
        }
        
        .box3 {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 3;
            /* 谁大谁在前面 
            层级一样，则优先显示靠下的
            */
        }
        
        .box4 {
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>

</body>

</html>