↩ zhcn 编程语言 Web相关 JSON 非公開: 关于CSS位置放置（介绍5种不同的放置方法）

关于CSS位置放置（介绍5种不同的放置方法）

CSS 位置属性用于设置元素在页面上的位置。这允许您将任何属性放置在您认为合适的任何位置。 position属性有五个可选值，分别对应五种不同的定位方式：

价值	解释
static	默认值静态对齐意味着没有对齐，元素显示在其正常位置，没有应用水平或垂直对齐属性。
relative	相对位置，即相对于元素的正常位置。您可以使用 top、right、bottom 和 left 属性来相对于其正常位置偏移元素。此设置不会影响元素内的其他元素。过程
absolute	绝对定位，首先是非静态定位相对于父元素的相对定位允许您使用四个属性来偏移元素相对于父元素的位置： top、right、bottom、left 。如果没有父元素满足条件，它将相对于浏览器窗口定位。绝对定位的元素不会影响其他元素。
fixed	固定位置，即相对于浏览器创建而言。可以使用四个属性来定义元素相对于浏览器窗口的位置：顶部、右侧、底部和左侧。具有固定位置的元素无论浏览器窗口如何滚动，元素的位置都保持固定。
sticky	粘性位置是相对位置和固定位置的组合，可以具有类似于吸附效果的实线。滚动页面时，效果与相对位置相同，如果滚动到屏幕外，则会自动变为固定。。

1.静态定位：静态

static 是position 属性的默认值，表示不定位。使用静态定位的元素按照元素的正常位置显示，不受 top、bottom、left、right 和 z-index 属性的影响。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 100px;
            border: 1px solid black;
        }
        div.static {
            width: 130px;
            height: 50px;
            background-color: #CCC;
            line-height: 50px;
            text-align: center;
            position: static;
            top: 50px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">postiont: static;</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_675”对齐=“aligncenter”宽度=“1024”]

图：静态放置[/caption]

2.相对位置：相对

相对定位是指调整元素相对于其默认位置的位置。顶部、底部、左侧和右侧四个属性的组合允许您相对于其默认位置向不同方向偏移元素。

[示例] 下面的代码演示了相对位置的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
        }
        div.static {
            width: 140px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: relative;
            top: 25px;
            left: 10px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: relative;</div>
        <p></p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_676”对齐=“aligncenter”宽度=“1024”]

图：相对位置[/caption]

注意：相对定位的元素可以移动并与其他元素重叠，但保留元素默认位置的空间。

3、绝对定位：absolute

绝对定位是指元素相对于第一个非静态定位（静态）的父元素进行定位。如果没有找到匹配的父元素，它将相对于浏览器窗口定位。您还可以使用 top、bottom、left 和 right 属性来相对于其父元素或浏览器窗口在不同方向上偏移元素。

使用绝对定位的元素会移出其原始位置，并且不再占用网页上的空间。与相对定位一样，使用绝对定位的元素也会与页面上的其他元素重叠。此外，使用绝对定位的元素可以具有不与其他元素的边距重叠的边距。

[示例] 使用绝对位置指定的示例如下所示。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
            position: relative;
        }
        div.static {
            width: 150px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: absolute;
            bottom: 10px;
            right: 5px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: absolute;</div>
        <p>&lt;p&gt;</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_677”对齐=“aligncenter”宽度=“1024”]

图：绝对定位[/caption]

4.固定位置：固定

固定定位意味着相对于浏览器窗口定位元素。使用固定定位的元素不会随着浏览器窗口的滚动而移动，就好像它们固定在页面上一样。这是通过使用网页上常见的“返回顶部”按钮的固定位置来实现的。

[示例] 下面显示了使用固定放置的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
        }
        p {
            width: 150px;
            height: 50px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p class="fixed">position: fixed;</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_678”对齐=“aligncenter”宽度=“775”]

图：固定位置[/标题]

位置粘性

固定放置与上面介绍的四种放置方式不同。这就像相对和固定放置的组合。滚动页面时，效果与相对定位相同。当元素滚动一定量时，它就会滚动。固定位置的效果。例如，某些网页上的导航菜单在页面加载时处于默认位置，并在向下滚动页面时保持固定在页面顶部。

[示例] 下面的示例演示了粘性定位的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
            position: relative;
        }
        p {
            width: 100%;
            height: 50px;
            margin: 0;
            text-align: center;
            line-height: 50px;
            background-color: #CCC;
        }
        p.sticky {
            background-color: blue;
            position: sticky;
            top:0px;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p class="sticky">position: sticky;</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_679”对齐=“aligncenter”宽度=“851”]

图：粘性定位[/caption]

使用粘性定位时，应注意以下事项：

设置position:sticky;时，必须定义四个属性之一：top、bottom、right、left。如果未定义，则仅发生相对定位。
使用固定定位元素的父元素不能定义overflow:hidden或overflow:auto属性。
父元素的高度不能小于固定定位元素的高度。
固定定位的元素仅在其父元素内有效。

通俗易懂的“CSS位置”解释！您必须观看的最佳 2 个视频

【HTML/CSS】カード型レイアウトのコーディング練習問題

https://www.youtube.com/watch?v=DtaWQTr2lNI&pp=ygUlIENTUyDkvY3nva7jga7phY3nva4gKDUg6YCa44KKKSZobD1KQQ%3D%3D

位置・配置を指定するCSSプロパティ「position」4つの値の基本的な記述方法

https://www.youtube.com/watch?v=4hf5yP6man8&pp=ygUlIENTUyDkvY3nva7jga7phY3nva4gKDUg6YCa44KKKSZobD1KQQ%3D%3D

JSON

CSS 位置属性用于设置元素在页面上的位置。这允许您将任何属性放置在您认为合适的任何位置。 position属性有五个可选值，分别对应五种不同的定位方式：

价值	解释
static	默认值静态对齐意味着没有对齐，元素显示在其正常位置，没有应用水平或垂直对齐属性。
relative	相对位置，即相对于元素的正常位置。您可以使用 top、right、bottom 和 left 属性来相对于其正常位置偏移元素。此设置不会影响元素内的其他元素。过程
absolute	绝对定位，首先是非静态定位相对于父元素的相对定位允许您使用四个属性来偏移元素相对于父元素的位置： top、right、bottom、left 。如果没有父元素满足条件，它将相对于浏览器窗口定位。绝对定位的元素不会影响其他元素。
fixed	固定位置，即相对于浏览器创建而言。可以使用四个属性来定义元素相对于浏览器窗口的位置：顶部、右侧、底部和左侧。具有固定位置的元素无论浏览器窗口如何滚动，元素的位置都保持固定。
sticky	粘性位置是相对位置和固定位置的组合，可以具有类似于吸附效果的实线。滚动页面时，效果与相对位置相同，如果滚动到屏幕外，则会自动变为固定。。

1.静态定位：静态

static 是position 属性的默认值，表示不定位。使用静态定位的元素按照元素的正常位置显示，不受 top、bottom、left、right 和 z-index 属性的影响。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 100px;
            border: 1px solid black;
        }
        div.static {
            width: 130px;
            height: 50px;
            background-color: #CCC;
            line-height: 50px;
            text-align: center;
            position: static;
            top: 50px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">postiont: static;</div>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_675”对齐=“aligncenter”宽度=“1024”]

图：静态放置[/caption]

2.相对位置：相对

相对定位是指调整元素相对于其默认位置的位置。顶部、底部、左侧和右侧四个属性的组合允许您相对于其默认位置向不同方向偏移元素。

[示例] 下面的代码演示了相对位置的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
        }
        div.static {
            width: 140px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: relative;
            top: 25px;
            left: 10px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: relative;</div>
        <p></p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_676”对齐=“aligncenter”宽度=“1024”]

图：相对位置[/caption]

注意：相对定位的元素可以移动并与其他元素重叠，但保留元素默认位置的空间。

3、绝对定位：absolute

绝对定位是指元素相对于第一个非静态定位（静态）的父元素进行定位。如果没有找到匹配的父元素，它将相对于浏览器窗口定位。您还可以使用 top、bottom、left 和 right 属性来相对于其父元素或浏览器窗口在不同方向上偏移元素。

使用绝对定位的元素会移出其原始位置，并且不再占用网页上的空间。与相对定位一样，使用绝对定位的元素也会与页面上的其他元素重叠。此外，使用绝对定位的元素可以具有不与其他元素的边距重叠的边距。

[示例] 使用绝对位置指定的示例如下所示。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            border: 1px solid black;
            position: relative;
        }
        div.static {
            width: 150px;
            height: 50px;
            background-color: #B3FF99;
            line-height: 50px;
            text-align: center;
            position: absolute;
            bottom: 10px;
            right: 5px;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div>
        <div class="static">position: absolute;</div>
        <p>&lt;p&gt;</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_677”对齐=“aligncenter”宽度=“1024”]

图：绝对定位[/caption]

4.固定位置：固定

固定定位意味着相对于浏览器窗口定位元素。使用固定定位的元素不会随着浏览器窗口的滚动而移动，就好像它们固定在页面上一样。这是通过使用网页上常见的“返回顶部”按钮的固定位置来实现的。

[示例] 下面显示了使用固定放置的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
        }
        p {
            width: 150px;
            height: 50px;
            background-color: #CCC;
            margin: 0;
            text-align: center;
            line-height: 50px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p class="fixed">position: fixed;</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_678”对齐=“aligncenter”宽度=“775”]

图：固定位置[/标题]

位置粘性

固定放置与上面介绍的四种放置方式不同。这就像相对和固定放置的组合。滚动页面时，效果与相对定位相同。当元素滚动一定量时，它就会滚动。固定位置的效果。例如，某些网页上的导航菜单在页面加载时处于默认位置，并在向下滚动页面时保持固定在页面顶部。

[示例] 下面的示例演示了粘性定位的使用。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 500px;
            position: relative;
        }
        p {
            width: 100%;
            height: 50px;
            margin: 0;
            text-align: center;
            line-height: 50px;
            background-color: #CCC;
        }
        p.sticky {
            background-color: blue;
            position: sticky;
            top:0px;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p class="sticky">position: sticky;</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
    </div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_679”对齐=“aligncenter”宽度=“851”]

图：粘性定位[/caption]

使用粘性定位时，应注意以下事项：