CSS 简明教程 - 位置属性 ( position )

yufei       2 年, 4 月 前       329

CSS position 属性用于指定元素的不同定位模式

position 属性的可选值有 5 个,分别如下

说明
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
relative 生成相对定位的元素,相对于其正常位置进行定位因此,"left:20" 会向元素的 LEFT 位置添加 20 像素
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
stick 元素的定位模式将随页面滚动而改变
inherit 规定应该从父元素继承 position 属性的值

如果元素已设置 position 属性 ( static 除外 ),则可以通过设置 topleftbottomright 属性来更改元素的位置

当然,这些属性基于不同的定位模式以不同的方式工作

不定位 position: static;

这是 HTML 元素的默认定位模式,即 无定位

元素将根据其类型在默认位置显示在文档中,通常,块级元素将从上到下垂直显示,并且内嵌元素将水平显示,有关元素显示方式的更多信息,请参阅 CSS 简明教程 - 显示和可见属性

如果我们不为元素设置 position 属性或将 position 属性设置为 static ,则 topleftbottomright 属性不会影响元素的位置

下面是一个示例

div.static {
    position: static;
    border: 2px solid red;
    top: 30px;
}

正如你所看到的那样,top 属性并不会影响元素的位置

相对定位 position: relative;

如果我们将元素的 position 属性设置为 relative,则元素将相对于其默认位置定位

这时候,我们可以设置 topleftbottomright 属性来更改元素相对于其默认位置的偏移量

例如

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

但是,页面仍保留元素偏移后留下的空白区域,且这些空白空间不会被其它元素占用

下面的示例很好的说明了这一点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单教程 ( www.twle.cn )</title>
<style>
h2.pos_top
{
    position:relative;
    top:-50px;
}
</style>
</head>

<body>
<h2>这是头部,不会有定位</h2>
<h2 class="pos_top">该元素会距离它的默认位置向上偏移 50 像素</h2>
<p>这是一个正常的段落</p>
</body>
</html>

相对定位的元件通常用作绝对定位元件的容器

绝对定位 position:absolute

如果我们将元素的 position 属性设置为 absolute,那么元素将相对于最近设置了定位 ( positioned ) 的祖先元素定位

如果没有祖先元素,则它将相对于 <body> 元素定位

绝对定位元素的位置独立于文档流,因此它不占用文档流的空间,这与相对定位完全不同

注意:「 positioned 」 元素是指已设置 position 属性的元素( static 除外 )

下面的代码是一个示例

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;
}

固定定位 position:fixed

如果我们将元素的 position 属性设置为 fixed ,则元素将固定到相对视图中的某个位置,并且在页面滚动时不会移动

在这种定位模式下,我们可以设置 topleftbottomright 属性以确定元素的初始位置

下面的代码是一个示例

div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    border: 2px solid red;
}

注意:你应该声明 <!DOCTYPE html> 以支持 IE7IE8 中的 position:fixed 定位

固定定位的元素不占用空间,因为其位置独立于文档流

固定定位的 HTML 元素可以与其它 HTML 重叠

粘定位模式 position:sticky

如果我们将元素的 position 属性设置为 sticky,则元素的定位模式将随页面滚动而改变

通过页面滚动,元素的定位模式将在相对 relative 和固定 fixed 之间切换,具体取决于它是否在视图窗口中

position:sticky 属性需要同时设置 topleftbottomright属性中的至少一个才能起作用

下面的代码是一个示例

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

注意:Internet ExplorerEdge 15 和早期 IE 版本不支持 position:sticky 定位,而在Safari 中则需要添加 -webkit- 的前缀

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.