HTML中块元素的定位属性——静态定位、绝对定位与相对定位与固定定位

最新推荐文章于 2024-09-13 16:35:28 发布

爱睡觉的小Meng

最新推荐文章于 2024-09-13 16:35:28 发布

阅读量1w

点赞数 5

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108752431

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 8 订阅

订阅专栏

块元素的定位：

元素的定位属性：
静态定位：
相对定位：
绝对定位：
固定定位：

元素的定位属性：

（1）：定位模式：
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
在这里插入图片描述
position属性的常用值有四个，分别表示不同的定位模式，具体如下表所示。
（2）：边偏移：
定位模式(position）仅仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在CSS中，通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，对它们的具体解释如下表所示。
在这里插入图片描述

静态定位：

静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。
所谓静态位置就是各个元素在HTML文档流中默认的位置。

任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，
并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

相对定位：

相对定位是将元素相对于它在标准文档流中的位置进行定位，当positition属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

绝对定位：

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。

将绝对定位与相对定位相联系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        .demo{
            width: 180px;
            height: 200px;
            border: 3px solid red;
            margin: 20px auto;
            position: relative;
        }

        .demo1{
            width: 80px;
            height: 80px;
            background-color: tomato;
            position: absolute;
            left: 100px;
            top: 10px;
        }

        .demo2{
            width: 80px;
            height: 80px;
            margin: 30px auto;
            background-color:violet;
            position: absolute;
            left: 150px;
            top: 20px;
        }

        .demo3{
            width: 80px;
            height: 80px;
            margin: 25px 158px;
            background-color: yellow;
            position: relative;
            top: 80px;
            left: 100px;
        }

        .demo4{
            width: 80px;
            height: 80px;
            background-color: magenta;
            /* position: relative;
            top:-30px;
            left: 50px; */
        }

    </style>

</head>

<body>
    
        <div class="demo">
            <div class="demo1"></div>
            <div class="demo2"></div>
            <div class="demo3"></div>
            <div class="demo4"></div>
        </div>
    
</body>

<html>