Web前端基础3-定位

最新推荐文章于 2024-08-15 15:12:55 发布

梦幻之光_dream

最新推荐文章于 2024-08-15 15:12:55 发布

阅读量744

点赞数

分类专栏： Web前端开发

本文链接：https://blog.csdn.net/William_fang/article/details/115358553

版权

Web前端开发专栏收录该内容

108 篇文章 10 订阅

订阅专栏

本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位和固定定位。通过实例代码展示了它们各自的特点：相对定位不脱离文档流，按照自身位置偏移；绝对定位脱离文档流，相对于最近的定位祖先元素定位；固定定位则始终相对于浏览器窗口定位，即使页面滚动也不会改变其位置。这些定位技术在网页布局中起着关键作用。

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

一.定位

定位常用的属性：left、right、top、bottom

0.案例

position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link href="position.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box1">box1
        <div class="box2">box2</div>
    </div>

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

position.css

.box1{
    width: 300px;
    height: 300px;
    border: 1px solid aqua;
    background-color: aqua;
    position: relative;
    top: 100px;
    left: 100px;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    position: relative;
    top: 130px;
    left: 130px;
    /*相对定位：移到原本的位置，不脱离文档流*/
}
.box3{
    width:100px;
    height: 100px;
    background-color: #CCFF99;
    position: relative;
    top: 130px;
    left: 130px;
}

网页效果
在这里插入图片描述

1.相对定位（relative）

①相对定位：相对于原来的位置，不脱离文档流。
②参照上面的案例和效果，可以看出相对定位是可以这么理解的:

   box1定位在了浏览器的下方，因为它的定位是从正常的文档流中开始的。
   box2定位在了box1的盒子里，因为它的代码写在了box1的div里，所以它从的定位是从box1的盒子里开始的。
   box3定位在了box1的盒子外面，因为在正常的位置（文档流）中，box1已经占据了上方的位置，所有box3肯定是出现在box1的下方。