Html的位置关系

最新推荐文章于 2023-12-25 17:08:57 发布

CunTouB

最新推荐文章于 2023-12-25 17:08:57 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/weixin_44943485/article/details/104884471

版权

定位

概述

在前端web开发中所谓文档流【页面中标签排列方式】：如果想打破文档流让标签可以在任意地方显示，需要进行定位；

分类

定位在前端开发中三种：固定定位、相对定位、绝对定位

固定定位

无论怎么滑动页面，都不会改变该元素在屏幕的位置
举例：百度百科右边的分享栏，无论怎么下滑页面，还是存在屏幕的固定位置
在这里插入图片描述
实现代码：

.box{
            /* 固定定位：固定定位元素不占起始位置 */
            position: fixed;        
        }

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        div{
             width:400px;
             height: 200px;
        }
        body{
            height: 10000px;
        }
        .box{
            /* 固定定位：固定定位元素不占起始位置 */
            position: fixed;
            left:500px;
            top:200px;
            background:red;
        }
        .box1{
            background:green;
        }
        .box2{
            background:purple;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

相对定位

相对定位也可以让元素脱离文档流，元素在进行相对定位的时候，其实相对的起始位置进行偏离，它是相对于自己的起始位置发生的偏移，而且还需要注意：相对定位元素起始位置值占用的。
举例：绿色方块是相对红色方块产生了相对位移，因此紫色方块不能够往红色方块边上靠
在这里插入图片描述
实现代码：

.box2{
            position: relative；         
        }

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        /* 清除默认样式：默认情况下有缝隙 */
        *{
            margin:0;
            padding: 0;
        }
        div{
             width:400px;
             height: 200px;
        }
        .box1{
            background:red;
        }
        .box2{
            position: relative;
            left:400px;
            top:200px;
            background:green;
        }
        .box3{
            background:purple;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

绝对定位

绝对定位也可以让元素脱离标准文档流：

绝对定位元素，如果没有定位父元素【绝对定位元素：参照页面进行偏移】
绝对定位元素，如果有定位父元素【绝对定位元素：参照定位父元素进行偏移】
注意：绝对定位元素不占起始位置（别人可以占用起始位置）

举例：红色方块是相对于整个页面产生的位移偏转，所以紫色方块会补齐缺失的那一行，紧靠绿块
在这里插入图片描述
实现代码：

.cur{
             position: absolute;             
        }

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        /* 子绝父相*/
        *{
            margin:0;
            padding: 0;
        }
        .box{
             position: relative;
             width:600px;
             height: 400px;
             background:red;
             border:1px solid black;
             left:200px;
        }
        .cur{
             position: absolute;
             left:0px;
             top:0px;
             width:300px;
             height:400px;
             background:cyan;
        }
        .cur1{
            position: absolute;
             width:300px;
             height:200px;
             left:300px;
             top:0px;
             background:purple;
        }
        .cur2{
            position: absolute;
            width:300px;
            height:200px;
            background:yellow;
            left:300px;
            top:200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cur"></div>
        <div class="cur1"></div>
        <div class="cur2"></div>
    </div>
</body>
</html>

重点原则

在前端开发中，很多时候都会遵循一个原则：子绝父相（子标签是绝对定位，父标签是相对定位）

CunTouB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html的位置关系

定位概述在前端web开发中所谓文档流【页面中标签排列方式】：如果想打破文档流让标签可以在任意地方显示，需要进行定位；分类定位在前端开发中三种：固定定位、相对定位、绝对定位固定定位无论怎么滑动页面，都不会改变该元素在屏幕的位置举例：百度百科右边的分享栏，无论怎么下滑页面，还是存在屏幕的固定位置实现代码：.box{ /* 固定定位：固定定位元素不占起始位置 ...
复制链接

扫一扫