绝对定位与相对定位

最新推荐文章于 2024-07-18 20:06:09 发布

Krismile_

最新推荐文章于 2024-07-18 20:06:09 发布

阅读量678

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Krismile_/article/details/103772618

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

绝对定位：可以实现一个标签展示在页面的任意位置，设置后将不受文档流的控制，与浮动类似，不占用空间。需要有参照元素，参照被设为相对定位或绝对定位的标签，若是没有设定参照标签，就会参照body。

相对定位：主要是给绝对定位设置参照物，绝对定位和相对定位经常搭配使用。

使用相对定位与绝对定位之后可以达到让元素在页面任意位置放置且不会影响达到其它元素的放置与布局的效果。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       body{
           margin: 0;
       }
       .one{
           width: 500px;
           height: 500px;
           /* 移动前： */
           /* margin-left: 300px; */
           /* 移动后： */
           margin-left: 600px;
           background-color: yellow;
           /* 有相对定位： */
           position: relative;
       }
       .two{
           width: 200px;
           height: 200px;
           /* 都是相对于参照的div来说 */
           top: 200px;
           left: 300px;
           background-color: red;
           position: absolute;
       }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

当没有给class为one的标签设置 position: relative 时，移动第一个div（黄色）的位置后，第二个div（红色）的情况如下图所示：

移动前：