CSS 基础（010_定位）

最新推荐文章于 2024-05-31 10:41:05 发布

柯南道尔2606

最新推荐文章于 2024-05-31 10:41:05 发布

阅读量581

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_positioning.asp

翻译：

CSS Layout - The position Property

position 属性用以对元素指定定位方法的类型（static、relative、fixed 或 absolute）。

The position Property

position 属性用以对元素指定定位方法的类型。
position 值有以下 4 种：

static
relative
fixed
absolute

接着，再结合 top、bottom、left 以及 right 属性定位元素。切记，只有在 position 属性被设置之后，它们才会起作用。根据 position 值的不同，它们的作用效果会不同。

position: static;

HTML 元素默认由 static 值来定位。
由 static 值定位的元素不受 top、bottom、left 以及 right 属性的影响。
以 position: static; 修饰的元素不以特殊方式定位，它总是根据页面的正常流进行定位：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.static {
                position: static;
                border: 3px solid #73AD21;
            }
        </style>
    </head>
    <body>
        <div class="static">This &lt;div&gt; element has position: static;</div>
    </body>
</html>

CSS 修饰如下所示：

div.static {
    position: static;
    border: 3px solid #73AD21;
}

position: relative;

以 position: relative; 修饰的元素是相对于自身的常规位置来定位的。
设置相对定位的元素的 top、bottom、left 以及 right 属性将调整自身与常规位置的距离。其它内容将不会适应元素的余留间隔。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.relative {
                position: relative;
                left: 30px;
                border: 3px solid #73AD21;
            }
        </style>
    </head>
    <body>
        <div class="relative">This div element has position: relative;</div>
    </body>
</html>

CSS 修饰如下所示：

div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}

position: fixed;

以 position: fixed; 修饰的元素是相对于 viewport 来定位的。这意味着，即使页面处于滚动状态，元素总是停在相同的位置。top、bottom、left 以及 right 属性用以定位元素。
以 fixed 修饰的元素不会在其原本处于页面的常规位置的地方预留间隔。
注意在页面的右下角以 fixed 修饰的元素。CSS 修饰如下所示：

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: fixed;

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.fixed {
                position: fixed;
                bottom: 0;
                right: 0;
                width: 300px;
                border: 3px solid #73AD21;
            }
        </style>
    </head>
    <body>
        <h2>position: fixed;</h2>
        <p>An element with position: fixed; is positioned relative to the
            viewport, which means it always stays in the same place even if the
            page is scrolled:</p>
        <div class="fixed">This div element has position: fixed;</div>
    </body>
</html>

position: absolute;

以 position: absolute; 修饰的元素是相对于已定位的父级元素来定位的（而不是相对于 viewport）。然而，如果以 absolute 修饰的元素没有已定位的父级元素，它会以文档体（document body）为基准，并且会随着页面的滚动而移动。

注意：“已定位”的元素是除了以 static 修饰的元素。

以下是一个简单的示例：
position: absolute;

<!DOCTYPE html>
<html>
    <head>
        <style>
            div.relative {
                position: relative;
                width: 400px;
                height: 200px;
                border: 3px solid #73AD21;
            }

            div.absolute {
                position: absolute;
                top: 80px;
                right: 0;
                width: 200px;
                height: 100px;
                border: 3px solid #73AD21;
            }
        </style>
    </head>
    <body>
        <div class="relative">
            This div element has position: relative;
            <div class="absolute">This div element has position: absolute;</div>
        </div>
    </body>
</html>

CSS 修饰如下所示：

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Overlapping Elements

在定位元素的时候，元素之间可能会重叠。
z-index 属性用以指定元素的栈指令（栈指令：用以确定元素之间的重叠次序）。
元素可以有正、负栈指令：
Overlapping Elements

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                position: relative;
                padding: 30px;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
            }

            img {
                position: absolute;
                left: 30px;
                top: 15px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div>
            <h1>This is a heading</h1>
            <img src="w3css.gif" width="100" height="140">
            <p>Because the image has a z-index of -1, it will be placed behind the text.</p>
        </div>
    </body>
</html>

栈指令大的元素总是重叠于栈指令低的元素之上。

注意：如果没有以 z-index 修饰且已定位的两个元素重叠，那么，在 HTML 代码中，后编辑的元素将被显示在上面。

Positioning Text In an Image

如何在图片之上定位文本：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <style>
            .w3-example {
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
                margin: 20px 0;
                padding: 0.01em 16px;
                background-color: #f1f1f1;
            }
        </style>
    </head>
    <body>
        <div class="w3-example">
            <h3>Example</h3>
            <div class="notranslate">
                <div style="position: relative; text-align: center;">
                    <img src="http://www.w3schools.com/css/trolltunga.jpg" alt="Norway" style="width: 100%; height: auto; opacity: 0.3">
                    <div style="position: absolute; bottom: 8px; left: 16px; font-size: 18px">Bottom Left</div>
                    <div style="position: absolute; top: 8px; left: 16px; font-size: 18px">Top Left</div>
                    <div style="position: absolute; top: 8px; right: 16px; font-size: 18px">Top Right</div>
                    <div style="position: absolute; bottom: 8px; right: 16px; font-size: 18px">Bottom Right</div>
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px">Centered</div>
                </div>
            </div>
        </div>
    </body>
</html>