CSS学习-元素定位

最新推荐文章于 2022-06-07 10:39:48 发布

it张zx

最新推荐文章于 2022-06-07 10:39:48 发布

阅读量72

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/itzhangzx/article/details/119784184

版权

HTML学习专栏收录该内容

5 篇文章 2 订阅

订阅专栏

本文详细介绍了CSS中四种定位方式：static、relative、absolute和fixed。通过示例展示了它们的工作原理及应用场景，重点讲解了相对定位、绝对定位和固定定位在网页布局中的作用和区别。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素定位</title>
    <style>
        /*
            1、属性
            position:;
            2、属性值
            1）static 静态定位 默认值
            2）relative 相对定位
                相对自己的原位置定位
                定位后原位置保留
                移动配合 left，right，top，bottom
              应用场景
                1）自己小范围的移动
                2）配合绝对定位使用
            3）absolute 绝对定位
                绝对定位相对于已经的定位的父元素定位
                如果父元素没有定位，逐级往上找，最后相对于body定位
                定位后原位置不保留
                移动配合 left，right，top，bottom
               应用场景
                1）形成独立的一层
                推荐：给父元素添加相对定位
            4）fixed 固定定位
                相对于浏览器窗口定位
                定位后原位置不保留
        */
        .box{
            height: 600px;
            width: 600px;
            background-color: deepskyblue;
            margin: 50px;
            position: relative;
        }
        .one{
            width: 200px;
            height: 200px;
            background-color: palegreen;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: palegoldenrod;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>
</html>

在这里插入图片描述

it张zx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习-元素定位

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素定位</title> <style> /* 1、属性 position:; 2、属性值 1）static 静态定位默认值
复制链接

扫一扫

专栏目录