CSS定位

最新推荐文章于 2024-06-01 09:36:59 发布

原创最新推荐文章于 2024-06-01 09:36:59 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS定位 #position #relative #fixed #absolute

CSS 专栏收录该内容

17 篇文章

订阅专栏

position的值有static，relative，absolute，fixed和inherit（继承）。
static和inherit比较简单，这里就简单解释一下。
static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit（继承）：继承自有position属性的父元素。如果父元素没有position属性，则默认为static。

absolute（绝对定位）

position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。初始包含块并不是body元素或者html元素，而是html元素的包含块（the initial containing block），指的是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准，以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。详情可以了解CSS绝对定位absolute的初始包含块不是body元素，也不是html元素。
下面是测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            #box1{
                width: 400px;
                height:400px;
                background-color: yellow;
            }
            #box2{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
            </div>
        </div>
    </body>
</html>

效果如图：
在这里插入图片描述
我们可以验证一下：
我们给box1加上position: relative;。
再给box2加上position: absolute;和bottom: 0px;。
效果如图：

我们把box1的position改为absolute。
效果如图：

我们把box1的position改为fixed。
效果如图：
在这里插入图片描述
我们把box1的position去掉。
效果如图：

可以看出，上面验证得到的结果跟描述是一致的。也就是position为absolute的元素会相对于距离最近的position为relative/fixed/absolute的上级元素进行定位，如果上级元素都没有position属性，那么则相对于初始包含块定位。

关于位置保留
元素使用absolute绝对定位移动后，原本的位置会被占据，元素会完全脱离了文档流。
我们可以验证一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            #box1{
                width: 400px;
                height: 400px;
                background-color: yellow;
            }
            #box2{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
            </div>
            <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
            <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
            <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        </div>
    </body>
</html>

效果如图：
在这里插入图片描述
这时我们给box2加上position： absolute;。
效果如图：

可以看到box2原本的位置被文字占据，box2完全脱离了文档流。

relative（相对定位）

position为relative的元素会相对于自身定位，它原本所占的空间仍保留。

下面是测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            #box1{
                width: 400px;
                height: 400px;
                background-color: yellow;
                border: 5px solid red;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
    </body>
</html>

效果如图：
在这里插入图片描述
我们给box1加上left: 100px;和top：100px;
效果如图：

可以看出box1向右和下各偏移了100px。
把left: 100px;和top：100px;修改为bottom: 100px;和right: 100px;。
效果如图：

box1向左和上各偏移了100px，可以看出有position: relative;的元素设置top、right、bottom和left是相对于自身进行偏移的。

关于位置保留

下面是测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            #box1{
                width: 400px;
                height: 400px;
                background-color: yellow;
                border: 5px solid red;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </body>
</html>

效果如图：
在这里插入图片描述
我们给box1加上position: relative;、top: 100px;和left: 100px;。
效果如图：

可以看到box1偏移后原本的位置被保留了下来，这跟设置了position: absolute;的元素是相反的。

fixed（固定定位）

position设置了fixed的元素相对于浏览器窗口定位，也是脱离文档流，不会保留原来的位置。
下面是测试代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>例子</title>
        <style type="text/css">
            #box1{
                width: 400px;
                height: 400px;
                background-color: yellow;
                border: 5px solid red;
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
        <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </body>
</html>

效果如图：
在这里插入图片描述
给box1加上上position: fixed;以及top:100px;和left: 100px;。
效果如图：

可以看出元素设置了position: fixed;后，可以通过设置top、right、bottom和left将元素相对于浏览器窗口偏移，所以这个时候就算你对页面进行滚动，元素也不会移动。而且也可以看出元素原本的位置也被占据了，元素完全脱离了文档流。