HTML标签

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

2020-10-22 14:52发布

站内文章 / HTML5
1097 0 0

块元素的定位：


元素的定位属性：

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

静态定位：

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

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

相对定位：

相对定位是将元素相对于它在标准文档流中的位置进行定位，当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>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

在这里插入图片描述

固定定位：

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。



作者：海底程序员

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

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。