CSS中三种主要的定位方式是什么-前端问答-PHP中文网

CSS中三种主要的定位方式是什么

PHPz

发布： 2023-04-23 16:36:04

原创

3326人浏览过

css是网页设计中最常用的样式语言之一，能够实现网页布局、样式等方面的控制。css中定位是非常重要的一部分，因为它使得我们能够在网页中自由地控制元素的位置。css中有三种主要的定位方式，分别是静态定位、相对定位和绝对定位，下面将逐一介绍它们之间的区别。

一、静态定位

首先是最简单的静态定位。静态定位（static）是默认的定位方式，它完全按照HTML文档流进行布局，元素按照标准HTML文档流顺序排列。我们没有必要为元素设置静态定位，因为它是默认的。下面是一个简单的静态定位示例：

<div class="box">
  <p>这是一个 div 元素。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9869">
                            <img src="https://img.php.cn/upload/webcode/000/000/010/176017140644098.jpg" alt="企站帮企业网站管理系统1.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9869">企站帮企业网站管理系统1.0</a>
                            <p>一、源码描述这是一款比较简单的企业管理系统源码，界面美观大方，功能简单，特别适合初学者学习研究，系统运行十分流畅，可以作为二次开发，同时也是可以帮助初学者增长知识的优秀代码。二、功能介绍主要功能：企业动态，产品介绍 ,免费下载，定制服务，该源码比较适合新手学习和二次开发使用。三、源码特点1、网站布局：采用目前最先进的布局方式DIV+CSS，符合W3C的标准和Web2.0的风格。2、程序设计模块化，</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="企站帮企业网站管理系统1.0">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9869" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="企站帮企业网站管理系统1.0">
                        </a>
                    </div>
                
</div>

登录后复制

.box {
  background: #ccc;
  padding: 20px;
}

登录后复制

这是一个典型的 div 元素，它会被静态定位，它会按照标准HTML文档流进行布局，并且在页面上占据一定的位置。

立即学习“前端免费学习笔记（深入）”；

二、相对定位

相对定位（relative）是相对于元素的初始位置进行定位的。也就是说，如果您让一个元素相对于它自己的初始位置定位，那么它将会移动相应的距离。下面是一个简单的相对定位示例：

<div class="box">
  <p>这是一个 div 元素。</p>
  <p class="inner">这是一个内部元素。</p>
</div>

登录后复制

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: relative;
  left: 30px;
  top: 20px;
}

登录后复制

我们使用了一个内部元素，它相对于 div 元素进行了定位。我们设置了相对定位的属性，left 和 top，使得元素相对于 div 元素向右移动 30px，向下移动 20px。所以我们可以清楚地看到，相对定位只是相对于元素的初始位置进行定位，而不是相对于整个页面或父元素进行定位。

三、绝对定位

绝对定位（absolute）是相对于最近的已定位的祖先元素（也就是 position 不是 static 的祖先元素）进行定位的。如果没有已定位的祖先元素，那么元素将会相对于 body 元素进行定位。下面是一个简单的绝对定位示例：

<div class="container">
  <div class="box">
    <p>这是一个 div 元素。</p>
    <p class="inner">这是一个内部元素。</p>
  </div>
</div>

登录后复制

.container {
  position: relative;
}

.box {
  background: #ccc;
  padding: 20px;
}

.inner {
  position: absolute;
  right: 30px;
  bottom: 20px;
}

登录后复制

我们使用了一个外层容器，它被设置为相对定位。我们设置了一个内部元素的绝对定位的属性，right 和 bottom，这使得元素相对于 div 元素向右移动 30px，向下移动 20px。注意到我们设置了外层容器的 position 属性，这是因为绝对定位需要参照物，如果没有父元素的 position 属性为非 static 值，那么元素将会相对于 body 元素进行定位。

总结

综上所述，CSS中有三种主要的定位方式，分别是静态定位、相对定位和绝对定位。静态定位是默认的定位方式，元素按照标准HTML文档流排列。相对定位是相对于元素的初始位置进行定位的，而绝对定位是相对于最近的已定位的祖先元素进行定位的。因此，在设计网页布局时，我们需要根据需求选择不同的定位方式，以达到最好的效果。

以上就是CSS中三种主要的定位方式是什么的详细内容，更多请关注php中文网其它相关文章！