欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

深入理解CSS布局定位方法

最编程 2024-07-28 07:48:33
...


为什么需要定位？

题外话：学习知识肯定是为了应用，当你了解这个知识在实际中的使用场景的时候，你的学习会变得更有针对性，你的效率会变得更高。

1.浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。
2.定位则是可以让盒子*的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

对比浮动和定位：

效果展示：大家可以先使用浮动实现一下，svg图标随便找一个图片就行。

CSS定位(详解)_绝对定位

分析：

一个大的div包含一个svg图标图标的右侧是一个文本框但是没有边框，边框的右侧是错误提示

CSS定位(详解)_文档流_02

使用浮动实现的思路，我们给三个盒子都添加浮动，给左侧一个添加左浮动，右侧一个添加右浮动，但是当左侧这个盒子添加左浮动后，我们会发现他们会紧紧的靠在一起，此时加入margin值来让效果更加分散。但是需要加清除浮动的样式避免影响后续元素的显示。

浮动实现的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .contain {
            padding-left: 10px;
            width: 400px;
            height: 36px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .logo {
            float: left;
            margin-top: 10px;
            vertical-align: middle;
            margin-right: 10px;
        }

        .phone {
            margin-top: 7px;
            float: left;
            width: 280px;
            height: 20px;
            outline: none;
            border: none;
        }

        .error {
            margin-top: 5px;
            float: right;
            margin-right: 10px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="logo">
            <svg t="1698452764094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2727" width="20" height="20">
                <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="2728"></path>
            </svg>
        </div>
        <input type="text" class="phone">
        <span class="error">输入错误</span>
    </div>
</body>

</html>

CSS定位(详解)_html_03

浮动造成的影响比较多，缺点比较大，但是如果说像这个父盒子大小都是固定的，并且布局基本不会变更的项目，可以使用浮动。但是记得加清除效果。

如果这个代码我们使用定位怎么实现呢？

使用定位实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .contain {
            position: relative;
            padding-left: 10px;
            width: 400px;
            height: 36px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 100px auto;
        }

        .logo {
            position: absolute;
            left: 10px;
            top:10px;
        }
        .phone {
            position: absolute;
            top: 7px;
            left: 50px;
            width: 280px;
            height: 20px;
            outline: none;
            border: none;
        }

        .error {
            position: absolute;
            top: 5px;
            right: 20px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="logo">
            <svg t="1698452764094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="2727" width="20" height="20">
                <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="2728"></path>
            </svg>
        </div>
        <input type="text" class="phone">
        <span class="error">输入错误</span>
    </div>
</body>

</html>

此时我可以直接指定我中间小盒子在大盒子的位置，更加方便。

定位

在网页开发中，定位是一种控制元素位置的方式。通过使用CSS中的定位属性（position），可以将元素放置在页面的指定位置。

在CSS中，常见的定位属性有四种：

  1. 静态定位（static）：默认值，元素按照正常的文档流布局进行排列，不受top、right、bottom、left等属性的影响。
  2. 相对定位（relative）：元素相对于其正常位置进行偏移，可以通过设置top、right、bottom、left属性来调整元素的位置。相对定位不会使元素脱离文档流，它在正常文档流中仍保留其位置，并且对其他元素的布局没有影响。
  3. 绝对定位（absolute）：元素相对于最近的具有定位属性（position: relative、position: absolute、position: fixed）的父元素进行定位，或者如果没有这样的父元素，则相对于整个页面进行定位。绝对定位会使元素脱离文档流，不再占据原来的位置，并且可以通过设置top、right、bottom、left属性来确定其位置。
  4. 固定定位（fixed）：元素相对于浏览器窗口进行定位，始终保持在固定的位置，即使页面滚动。固定定位也会使元素脱离文档流，不再占据原来的位置，并且可以通过设置top、right、bottom、left属性来确定其位置。

1.静态定位（了解即可）

静态定位（position: static）是CSS中元素默认的定位方式，它按照正常的文档流布局进行排列，不受 top、right、bottom、left 等属性的影响。在静态定位下，元素不会脱离文档流，也不会对其他元素造成影响。

静态定位通常用于恢复其他定位方式（如相对定位、绝对定位等）所产生的效果，或者作为默认的定位方式。

使用静态定位时，不需要显式地设置 position: static，因为这是元素的默认状态。如果你希望将一个已经设置了其他定位方式的元素恢复为静态定位，可以使用 position: static; 来清除之前的定位设置。

2.相对定位(掌握)

相对定位（position: relative）是CSS中的一种定位方式，它相对于元素在文档流中的原始位置进行定位。相对定位不会使元素脱离标准流，而是在原始位置的基础上进行微调。

使用相对定位时，可以通过设置 top、right、bottom 和 left 属性来调整元素的位置。这些属性指定了元素相对于其原始位置的偏移量。正值将元素向下或向右移动，负值则将元素向上或向左移动。

相对于自己在文档流中的原始位置进行调整，仍然会占据原本的位置。

<!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>
        .head{
            position: relative;
            width: 100px;
            height:100px;
            background-color: pink;
            top:100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="head">

    </div>
    <div class="end">
        12123
    </div>
</body>
</html>

显示：下面的end没有占据上方

CSS定位(详解)_前端_04

3.绝对定位（掌握）

绝对定位指的是相对于最近的非静态定位的父元素或者非静态定位的祖先元素进行定位。他会脱离标准流并且不保留原位置。
特性：
  1. 定位参考点：对于使用绝对定位的元素，定位参考点是其最近的非静态定位的父元素或最近的非静态定位的祖先元素。如果没有符合条件的父元素或祖先元素，则参考点为初始包含块（initial containing block），即通常为浏览器窗口。
  2. 定位属性：使用top、right、bottom和left等属性来设置元素相对于定位参考点的偏移量。这些属性的值可以是像素（px）、百分比（%）或其他支持的单位。
  3. 脱离文档流：通过绝对定位，元素脱离了正常的文档流，不再占据原本的空间，因此其他元素会忽略该元素的位置，而直接布局在其原始位置上。
  4. 重叠与层叠：使用绝对定位时，如果多个元素发生重叠，可以通过z-index属性来控制元素的层叠顺序。z-index较大的元素会覆盖z-index较小的元素。

举例使用：

<!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>
        .head{
            position: relative;
            width: 100px;
            height:100px;
            background-color: pink;
            top:100px;
            left: 100px;
        }
        .d{
            position: absolute;
            top:10px;
            left: 10px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="d">222</div>
    </div>
    <div class="end">
        12123
    </div>
</body>
</html>

效果展示

CSS定位(详解)_绝对定位_05

222盒子是假的绝对定位，粉色盒子加的相对定位，我们发现222盒子是以加相对位置的粉红色盒子为参考系进行定位的。

4.固定定位（掌握）

固定定位是相对于浏览器窗口进行定位的，即使页面发生滚动他也不会移动，定位当前窗口。

使用样例：（电梯导航栏）

CSS定位(详解)_文档流_06

特性讲解

  1. 定位属性（position property）：使用固定定位之前，需要给元素设置定位属性为fixed。
  2. 定位参考点：对于使用固定定位的元素，定位参考点始终是浏览器窗口。
  3. 定位属性：使用top、right、bottom和left等属性来设置元素相对于浏览器窗口的偏移量。这些属性的值可以是像素（px）、百分比（%）或其他支持的单位。
  4. 脱离文档流：通过固定定位，元素脱离了正常的文档流，不再占据原本的空间，因此其他元素会忽略该元素的位置，而直接布局在其原始位置上。
  5. 页面滚动：使用固定定位的元素会始终保持在指定的位置，无论用户如何滚动页面。这在需要创建导航栏、悬浮工具栏等需要始终可见的元素时非常有用。
  6. 重叠与层叠：与绝对定位类似，如果多个固定定位的元素发生重叠，可以通过z-index属性来控制元素的层叠顺序。z-index较大的元素会覆盖z-index较小的元素。
<!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>
        .head{
            position: relative;
            width: 100px;
            height:100px;
            background-color: pink;
            top:100px;
            left: 100px;
        }
        .d{
            position: absolute;
            top:10px;
            left: 10px;
            background-color: blue;
        }
        .l{
            position: fixed;
            top:100px;
            left: 500px;
            width: 30px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="d">222</div>
    </div>
    <div class="end">
        12123
    </div>
    <div class="l">
        导航栏
    </div>
</body>
</html>

CSS定位(详解)_html_07

当我向盒子中加入多个元素的时候，此时向下滚动，我们发现fixed定位的盒子在当前现实的窗口中的位置一直是固定的

CSS定位(详解)_css_08

子绝父相

子绝父相指的是 子元素使用绝对定位，父元素使用相对定位来控制子元素的定位，

"子绝父相"的优点在于可以非常精确地控制子元素的位置、大小和层叠顺序，从而实现灵活、复杂的布局效果。同时，由于子元素脱离了文档流，因此不会影响其他元素的布局。

"子绝父相"通常用于以下情况：

  1. 绝对定位元素需要参考相对定位元素的位置进行定位。
  2. 实现复杂的层叠效果。
  3. 实现特殊的交互效果，如悬浮面板、滚动效果等。

父绝子相：（了解为什么不适用以及缺点）

根据特性我们知道当是父绝子相的时候，并不能很好的控制子元素在父元素中的显示，并且父元素加绝对定位还会脱标，后续元素可能直接就到达子元素前面。破坏结构。

<!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>
        .head{
            z-index: -2;
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .d{
            top:100px;
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="d"></div>
    </div>
    <div style="z-index: 1;">123132</div>
</body>
</html>

CSS定位(详解)_css_09

父绝子绝:（了解为什么不适用以及缺点）

<!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>
        .head{
            z-index: -2;
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .d{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="d"></div>
    </div>
    <div style="z-index: 1;">123132</div>
</body>
</html>

CSS定位(详解)_html_10

父相子相（了解缺点，可能用到）

<!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>
        .head{
            left: 100px;
            z-index: -2;
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .d{
            top:100px;
            position: relative;
            width: 100px;
            left: 10px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="d"></div>
    </div>
    <div style="z-index: 1;">123132</div>
</body>
</html>

CSS定位(详解)_绝对定位_11

这种布局缺点：

  1. 元素堆叠顺序：相对定位的元素在堆叠顺序（z-index）方面与绝对定位的元素不同。父相对定位和子相对定位的元素的堆叠顺序通常由它们在文档流中的先后顺序决定，而无法通过z-index属性来改变。
  2. 文档流占位：相对定位不会使元素脱离文档流，因此仍然会占据其原本的空间。这意味着其他元素仍然会考虑相对定位元素的位置，可能导致布局上的一些限制。
  3. 布局限制：相对定位通常是相对于元素自身的位置进行定位，而不是相对于其他元素进行定位。这意味着相对定位的元素不能完全脱离其原始位置，只能在该位置上进行微调。

定位的叠加，当我们在一个大的盒子中实现两个绝对定位的时候，他们会重叠到一块，此时考虑使用z-index 来使指定盒子显示，

z-index属性的值可以是整数、auto或inherit。整数这个值表示元素的堆叠顺序，较大的值意味着元素将覆盖较小值的元素。如果两个相同z-index的元素重叠，则后面的元素将覆盖前面的元素。auto表示浏览器自动确定元素的堆叠顺序，而inherit表示元素从其父元素继承z-index的值。

需要注意的是：

z-index只能应用于已定位元素（即元素的position属性设置为relative、absolute或fixed）。如果尝试将z-index应用于未定位的元素，z-index属性会被忽略。

现在大家可以练习一下这个布局：

CSS定位(详解)_文档流_12

分析：

CSS定位(详解)_文档流_13

注意绝对定位的脱标，以及子绝父相的应用。

上一篇： LSParser

下一篇： 玩转CSS定位技巧⑥：让子元素在父容器中*浮动 - 绝对定位实战与代码实例

推荐阅读