CSS 入门：布局元素放置（位置）

terry 2年前 (2023-09-27) 阅读数 113 #数据结构与算法

位置（位置）

CSS 布局的核心是位置属性。可以根据元素字段在文档正常流中的位置来更改此属性对元素字段的应用。位置属性
有 4 个值：static、relative、、fix ，默认值为静态。

接下来我会用下面四段来一一解释这些属性的含义。

<p id="first">First Paragraph</p>
<p id="Second">Second Paragraph</p>
<p id="specialpara">Third Paragraph</p>
<p id="fourth">First Paragraph</p>

`静态放置（Static）`

我们先来看看全部四段静态放置的效果。所有四个段落都使用静态放置图标

通过静态放置，每个元素都处于文档的正常流程中。它们是块级元素，因此它们将在页面上从上到下堆叠。

`相对位置（Relative）`

现在我将第三段的position属性设置为relative。

p#specialpara {
    position: relative;
    top: 25px;
    left: 30px;
}

因为相对位置是相对于其在文档流中的原始位置（默认位置），所以如果只设置位置样式，是不会有任何变化的。这里我设置了top和left属性来改变它的位置。

现在它的效果如图所示：第三段使用相对定位

第三段现在与原始元素（正文）分离，并与其在文档中的位置一致默认位置有向下移动 25 像素，向右移动 30 像素。

需要注意的是，除了元素本身相对于原来的位置发生了移动之外，页面并没有发生任何变化。这个元素原本占据的空间并没有移动，其他元素也是如此。

如果此时不想第四段被遮挡，可以给第四段设置一个上边框。

`绝对定位（absoulte）`

与静态定位和相对定位相比，绝对定位将元素从文档流中完全删除。？这意味着绝对定位的元素脱离了文档的正常流程，现在相对于顶级元素（主体）进行定位。

现在包括概念：定位上下文。这些事会晚一些讨论。我们继续看最后一种定位方式：固定定位。

移动框属性如何工作？

长方体偏移属性有“上、右、下、左”四个属性，用于指定特征的放置位置和方向。这些属性仅在元素的“位置”属性设置为“相对、绝对和固定”属性值时生效。

对于相对定位的元素，设置这些属性会将元素从其初始位置移动。例如，如果 top 在相对定位的元素上将值设置为“20px”，则该元素将从其原始位置向下移动“20px”。

对于绝对定位和固定定位，这些属性指定元素与父元素边框之间的距离。例如，将绝对定位元素的“top”值设置为“20px”将导致绝对定位元素相对于其设置。具有相对定位的父元素的上边缘向下移动“20px”。相反，如果“top”的值设置为“20px”，则绝对定位元素的上边缘将相对于相对定位的父元素的上边缘向上移动“20px”。（绝对定位的参考点是当其前驱设置为“相对”或“绝对”时。）

事实上，一个相对定位的元素同时设置了“顶部”和“底部”位移属性值。事实上，它的“top”优先级高于“bottom”。但是，相对定位的元素同时设置了“left”和“right”位移属性，它们的优先级取决于页面使用的语言。例如，如果您的页面如果你的页面是英文，那么位移属性“左”，级别高。如果你的页面是阿拉伯文，那么滚动属性“右”优先级高。

`固定位置（Fixed）`

固定位置类似首先我们看一下将位置改为相对位置效果：

p#specialpara {
    position: fixed;
    top: 25px;
    left: 30px;
}

效果如图：第三段使用固定位置的效果

效果完全一样与绝对位置相同，但固定位置的位置上下文是浏览器窗口，她不会滚动页面。

以下是使用相对定位和固定定位的说明：使用固定定位的图片使用绝对定位的图片

`固定页眉和页脚`

固定定位最常见的目的是创建固定的页眉、页脚或页面侧边。即使用户移动浏览器滚动条，页面上的滚动条也保持不变。

现在让我们看看定位上下文。

`定位上下文`

将元素的位置属性设置为相对、绝对或固定后，您可以使用顶部、右侧、底部和左侧属性来相对于另一个元素移动元素的位置。这里下一个元素是当前元素的位置上下文。

在介绍绝对定位时，我们说过绝对定位元素的默认放置上下文是body。这是因为主体是标记中所有元素的单一祖先。但是，如果其对应元素设置为relative，则绝对定位元素的任何父元素都可以成为其位置上下文。

例如：

<body>
    <div id="outer">
      <div id="inner"> This is text for a paragraph to demonstrate contextual
        positioning. Here are two divs, one nested in the other. The inner div now
        has absolute positioning, so it positions itself relative to the default
        positioning context, body.</div>
    </div>
</body>

css样式如下：

div#outer {
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}
div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

结果如图：两个嵌套的女主角。外部顶部添加边框，内部添加背景

所有内部和外部div都静态定位在这里，谁是谁的放置上下文毫无疑问，因此top和left属性将不被反映。

让我们将内部 div 设置为绝对位置并查看变化。

div#inner {
    top:10px; 
    left:20px; 
    background:#DDD;
}

这是如图所示的效果：这里，由于位置上下文是主体，因此顶部和左侧都相对于主体移动

这里，因为没有其他父元素相对定位可以用作定位上下文，而绝对定位则只能相对于主体进行定位。

其实，如果设置了元素的外边框和内边框，大多数情况下都可以使用静态放置来实现页面布局。除非确实需要，否则不要编辑元素的位置属性。

现在我们将外层div的位置设置为相对位置：

div#outer {
    position: relative;
    width:250px; 
    margin:100px 40px; 
    border-top:3px solid red;
}

将外层div改为相对位置的效果将外层div改为相对位置后，children中绝对定位的元素也会跟随top 和 left 属性的设置是相对于外层 div 定位的。此时，内部奇迹的顶部和左侧属性与外部奇迹相关。 
最后，我们来谈谈与定位相关的显示属性。 
显示属性 
所有元素都有一个 显示属性。显示属性有两个最常用的值：块（块级元素）和内联（嵌入元素）。 
 块级元素：例如段落、标题、列表等在浏览器中上下堆叠显示。
 嵌入元素：如 a、span 和 img 在浏览器中彼此相邻显示。仅当上一行没有空格时才显示下一行。 
 块级元素和行内元素可以相互转换：
/*默认为块级元素*/
p {display: inline;}
/*默认为行内元素*/
a {display: block;}
display 还有一个属性值：none。如果将 display 设置为 none，则该元素以及其中包含的所有元素都不会显示在页面上。他们原本占据的空间也会被回收
对应的属性是可见度。该属性常用的值为visible（默认）和hidden。将元素的可见性设置为隐藏，元素将被隐藏，但它所占用的空间仍然存在。 
我们之前的CSS入门指南-2：盒子模型、浮动和清除中提到的clearfix类使用了这个属性，我们添加一个块级元素，然后将内容隐藏以清除浮动。 clearfix样式如下：
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
    }
作者：goodspeed
链接：https://juejin.im/post/5978a28051882515332e0afa
来源：版权归属作者：掘金商业转载请联系作者请求授权。非商业转载请注明来源。