HTML中的定位

次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。

position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。

我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。

我们来通过代码和结果来看一下：

没有定位的样式

加了relative

加了relative的结果

上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]

我们可以看出猫图片并没有移动，而是给兔子图片留着位置。

加了absolute

加了absolute的结果

这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置

加了fixed

代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。

用了fixed的效果展示。

以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS定位。

一、Position(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

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

二、属性

1. Static 定位（默认效果）

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

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

2. Fixed 定位

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

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

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
    <head>
        <style>
            p.pos_fixed {
                position: fixed;
                top: 30px;
                right: 5px;
            }
</style>
    </head>


    <body>


        <p class="pos_fixed">Some more text</p>
        <p><b>Note:</b> 代码使人进步！！！.</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>


    </body>


</html>

注意：

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

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

3. Relative 定位

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

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title> 定位</title>


    <head>
        <style>
            h2.pos_left {
                position: relative;
                left: -20px;
            }


            h2.pos_right {
                position: relative;
                left: 20px;
            }
</style>
    </head>


    <body style="background-color:azure;">


        <p>Some more text</p>
        <p><b>Note:</b> 代码使人进步！！！.</p>
        <h2 class="pos_left">This heading is moved left according to its normal position</h2>
        <h2 class="pos_right">This heading is moved right according to its normal position</h2>


    </body>


</html>

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

h2.pos_top{
    position:relative;
    top:-50px;
}

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

4. Absolute 定位

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

h2{
    position:absolute;
    left:100px;
    top:150px;
}

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

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

三、重叠的元素

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

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

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

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

四、总结

本文基于Html基础，主要介绍了CSS中四种定位的方式。对于四种的定位表现形式，用丰富的案例，代码效果图的展示，帮助大家更好理解。

最后，希望可以帮助大家更好的学习CSS3。

ss 中的定位，是布局中常用的一种方法，它可以使html元素脱离文档流，重新定位。语法如下：

position: static|relative|absolute|fixed

position 有四个值，static（默认静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），通常配合left、top及z-index属性使用（static除外）。

left —— 定位元素相对于定位点的左距离
top —— 定位元素相对于定位点的上距离
z-index ——定位元素的层级，当有多个定位元素上，通过此属性调整元素的显示层级，值越大的显示在最上面。默认如果不设置z-index属性，则会按照其在文档流中的先后位置显示。

static（静态定位）

静态定位很简单，html元素默认就是静态定位，和正常情况下html元素在文档流中的排版一样。left、top和z-index属性对应静态定位来说不起任何左右，如下图示例：

图1

图1中的模块1，虽然设置了position:static,但是其表现和没有设置是一样的，按照标准文档流进行排版。

relative（相对定位）

相对定位是html元素相对于它原来在标准文档流中的位置来定位的。如果不设置top、left的话它和静态定位一样，不同之处就是它可以设置top、left和z-index属性，如下图示例：

代码：

图2

显示效果：

图3

图3中模块2使用了相对定位，脱离正常的文档流，相对于原始位置左边50px，顶部30px，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有偏移。

相对定位的元素宽度默认和块级元素一样，宽度100%；

absolute（绝对定位）

绝对定位时当父级元素也是定位元素（包括相对定位、绝对定位、固定定位）时，它就相对于父级元素的左上角定位，如果父级元素没有定位或者是静态定位，那就相对于浏览器窗口左上角定位。如下示例：

代码：

图4

显示效果：

图5

图5中模块3和模块2-1都设置为绝对定位，模块3的父级没有定位，模块2-1的父级是模块2（相对定位）。所以模块3相对于页面左上角位置定位，模块2-1相对于模块2左上角定位。

绝对定位不保留原来的位置，完全是脱离文档流，且其宽度变成不是100%（类似行内元素），它通常都是和有定位的父级元素一块使用才有意义。

fixed（固定定位）

固定定位，通俗讲就是固定到屏幕上，它和绝对定位一样完全脱离文档流，不保留原来的空间位置。唯一的区别就是它是始终都是相对于浏览器窗口左上角定位，不管其父级元素设置了定位。如下示例：

代码：

图6

显示效果：

图7

图7中模块4的设置为固定定位，它的父级时模块2（相对定位），可以看出和模块2-1（绝对定位）的区别，模块4不是相对于父级的。

再看下面这个示例，当滚动滚动条时模块4始终定在那块不动。

图8

关于z-index

注意看上面图8中，模块4显示在模块3下面，看下图模块3的z-index明明比模块4的小，为什么会显示在模块4上面？

图9

原因是模块4的父级模块（相对定位），它的z-index是100和模块3相同，又因为模块3元素在模块2元素后面，所以模块3显示在模块4上面，如果把模块2的z-index改成101，如下图：

图10

模块4显示在模块3上面了，所以z-index的属性是同级元素相互进行比较大小。

总结

在网页布局中，定位在早期使用较多，现在不建议过多使用定位，只有在特殊情况下使用，比如返回顶部按钮效果，或左侧导航栏，菜单栏固定定位，不跟随页面滚动等。

本篇主要知识点：

定位	行为	在文档流中
static	默认行为；元素按顺序堆叠并相互了解	是的
relative	相对于其在流中的原始位置定位	是的
fixed	相对于浏览器窗口定位	不在
absolute	相对于最近的非静态 ( fixed, relative, absolute) 元素定位	不在

感谢关注，欢迎指正错误及补充。

上篇：前端入门——浮动float

在线咨询

上一篇：HTML、CSS、JavaScript及相互关系
下一篇：纯CSS丝滑边框线条动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML中的定位

家好，我是IT共享者，人称皮皮。这篇我们来讲讲CSS定位。

一、Position(定位)

二、属性

1. Static 定位（默认效果）

2. Fixed 定位

3. Relative 定位

4. Absolute 定位

三、重叠的元素

四、总结

static（静态定位）

relative（相对定位）

absolute（绝对定位）

fixed（固定定位）

关于z-index

总结

您的项目需求