CSS Positioning(定位)

最新推荐文章于 2026-06-11 10:34:10 发布

转载最新推荐文章于 2026-06-11 10:34:10 发布 · 447 阅读

CSS Positioning(定位)：

position 属性指定了元素的定位类型。

position 属性的四个值：

static
relative
fixed
absolute

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响。

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fixed定位使用</title>
    <style>
        p.pos_fixed{
            position: fixed;
            top: 30px;
            right: 5px;
        }
    </style>
</head>
<body>
<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</body>
</html>

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

relative 定位

相对定位元素的定位是相对其正常位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>relative定位的使用</title>
    <style>
        h2.pos_left{
            position: relative;
            left: -20px;
        }
        h2.pos_right{
            position: relative;
            left: 20px;
        }
    </style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。</title>
    <style>
        h2.pos-top{
            position: relative;
            top: -50px;
        }
    </style>
</head>
<body>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos-top">这个标题是根据正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body>
</html>

相对定位元素经常被用来作为绝对定位元素的容器块

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>absolute定位应用</title>
    <style>
        h2{
            position: absolute;
            left: 100px;
            top: 150px;
        }
    </style>
</head>
<body>
<h2>这是一个决定定位le的标题</h2>
<p>用绝对定位，一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100px和距离页面的顶部150px的元素。</p>
</body>
</html>

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>重叠的元素-Z-index</title>
    <style>
        img{
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1>I have a car</h1>
<img src="image/img6.gif" alt="无此图片" width="100px" height="140px"/>
<p>应为图像元素设置了z-index 属性值为-1 所以他会显示在文本之后。</p>
</body>
</html>

更多实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>裁剪元素的外形</title>
    <style>
        img{
            position: absolute;
            clip:rect(0px,60px,200px,0px)
        }
    </style>
</head>
<body>
<img src="image/img4.jpg" alt="无此图片" width="200px" height="200px"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如何使用滚动条来显示元素内溢出的内容</title>
    <style>
        div.scroll{
            background-color: green;
            width: 100px;
            height: 100px;
            overflow: scroll;
        }
        div.hidden{
            background-color: #008CBA;
            width: 100px;
            height: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情</p>
<p>overflow:scroll</p>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
<p>overflow:hidden</p>
<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>如何设置浏览器自动溢出处理</title>
    <style>
        div{
            background-color: #9D839D;
            width: 150px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>
<body>
<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>
    当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>更改光标</title>
</head>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>

所有的CSS定位属性

"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。

属性	说明	值	CSS
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto length % inherit	2
clip	剪辑一个绝对定位的元素	shape auto inherit	2
cursor	显示光标移动到指定的类型	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	2
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto length % inherit	2
overflow	设置当元素的内容溢出其区域时发生的事情。	auto hidden scroll visible inherit	2
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	auto hidden scroll visible no-display no-content	2
position	指定元素的定位类型	absolute fixed relative static inherit	2
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto length % inherit	2
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto length % inherit	2
z-index	设置元素的堆叠顺序	number auto inherit	2

CSS 布局 - 水平 & 垂直对齐

水平 & 垂直居中对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

div 元素是居中的

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>水平 & 垂直居中对齐</title>
    <style>
        .center{
            margin: auto;
            width: 60%;
            border: 3px solid #73ad21;
            padding: 10px;
        }
    </style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素（如div），可以使用margin:auto；</p>
<div class="center">
    <p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>
</body>
</html>

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

文本居中对齐

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本居中对齐</title>
    <style>
        .center {
            text-align: center;
            border: 3px solid green;
        }
    </style>
</head>
<body>
<h2>文本居中对齐</h2>
<div class="center">
    <p>文本居中对齐。</p>
</div>
</body>
</html>

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片居中对齐</title>
    <style>
        img{
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<h2>图片居中对齐</h2>
<p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>
<img src="image/img6.gif" alt="无此图片" style="width: 40px"/>
</body>
</html>

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

菜鸟教程 -- 学的不仅是技术，更是梦想！！！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右对齐-使用定位方式</title>
    <style>
        .right{
            position: absolute;
            right: 0px;
            width: 300px;
            border: 3px solid #73ad21;
            padding: 10px;
        }
    </style>
</head>
<body>
<h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p>

<div class="right">
    <p>菜鸟教程 -- 学的不仅是技术，更是梦想！！</p>
</div>
</body>
</html>

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右对齐 - 使用定位方式</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
            width: 100%;
        }
        .right{
            position: absolute;
            right: 0px;
            width: 300px;
            background-color:#b0e0e6;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="right">
        <p><b>注意: </b>当使用浮动属性对齐,总是包括 !DOCTYPE 声明!如果丢失,它将会在 IE 浏览器产生奇怪的结果。</p>
    </div>
</div>
</body>
</html>

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>左右对齐 - 使用 float 方式</title>
    <style>
        .right{
            float: right;
            width: 300px;
            border: 3px solid red;
            padding: 10px;
        }
    </style>
</head>
<body>
<h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p>

<div class="right">
    <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>
</div>
</body>
</html>