CSS的四种定位方式

最新推荐文章于 2024-07-30 14:09:21 发布

一荤一素.

最新推荐文章于 2024-07-30 14:09:21 发布

阅读量682

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/zzh3315689707/article/details/137535290

版权

本文详细介绍了CSS中的四种定位模式：静态定位（默认）、相对定位、绝对定位和固定定位，阐述了它们的工作原理、特点以及使用示例，帮助读者理解和掌握这些基本的布局技巧。

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

定位模式：（position）

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

<style>
        .box1{ 
            position:属性值; 
         }
</style>

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

CSS的四种定位方式：

1.静态定位：

position: static;静态定位的盒子是标准流状态，静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

静态定位按照标准流特性摆放位置，它没有边偏移。
静态定位在布局时我们几乎不用的

 <style>
        .box1{ 
            position: static; 
         }
        
 </style>

2.相对定位(relative)-重要：

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的

语法：

<style>
    .box2{
            position: relative;
        }
</style>

相对定位的特点：

1、它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

2、原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。

相对定位的参照物:自己原来的位置。

相对定位的标签在网页中占位置(标签走了但是原来的位置依旧保留着)

效果图：

代码如下：

<head>
    <style>
        .box1{
            width:100px;
            height:100px;
            background-color:pink;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:plum;
            position: relative;
            top:120px;
            left:80px;
        }
        .box3{
            width:100px;
            height:100px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

3.绝对定位(absolute) - 重要：

绝对定位的盒子脱离了标准流，在页面中不占位置

绝对定位的参照物1:浏览器的第一屏

绝对定位的参照物2:有定位的父亲(任何定位都可以，最好是相对定位)

(子绝父相)

语法：

<head>
<style>
      .bxo2{
           position:absolute;
           }
 </style>
</head>
<body>
    <div class="bxo2"></div>
</body>

1.未加入绝对定位 2.加入绝对定位第二个盒子完全脱标-原有位置被后续盒子占据

第二张图代码如下：

<head>
    <style>
        
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width:20px;
            height:20px;
            background-color:greenyellow;
        }
        .box3{
            width:20px;
            height:20px;
            background-color:firebrick;
        }
        .box2{
            position:absolute; 
            top:10px;
            left:10px;
            width:20px;
            height:20px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

4.固定定位(fixed) - 重要：

固定定位是元素固定于浏览器可视区的位置

主要使用场景，浏览器页面滚动时位置不会发生改变

语法：

<head>
    <style>
        .box2{
            position: fixed;
        }
    </style>
</head>
<body>
    <div class="box2"></div>
</body>
</html>

固定定位的特点：

1、以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。
无论如何滑动滚轮他都不会改变位置。

2、固定定位不在占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

完全脱标—— 完全不占位置；
只认浏览器的可视窗口

代码如下：

<head>
    <style>
        .box2{
            width:100px;
            height:100px;
            background-color:khaki;
            border-radius:50%;
            position: fixed;
            top:50px;
            right:50px;
        }
    </style>
</head>
<body>
    <div class="box2"></div>
</body>
</html>

以上是CSS定位的四种方式大家快去试试吧！