2019-11-05

CSS Position 定位

前言

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

属性	描述	CSS	🔗
position	指定元素的定位类型	2	🔗

top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移	2	🔗
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移	2	🔗
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移	2	🔗
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移	2	🔗

z-index	设置元素的堆叠顺序	2	🔗
clip	剪辑一个绝对定位的元素	2	🔗
cursor	显示光标移动到指定的类型	2	🔗
clear	规定元素的哪一侧不允许其他浮动元素	1	🔗
display	规定元素应该生成的框的类型	1	🔗
float	规定框是否应该浮动	1	🔗
visibility	规定元素是否可见	2	🔗

overflow	设置当元素的内容溢出其区域时发生的事情	2	🔗
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	2	🔗
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	2	🔗

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

1、Position 定位

position 属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

属性	描述	CSS	备注	🔗
position	指定元素的定位类型	2		🔗

属性值

值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left: 20;” 会向元素的 LEFT 位置添加 20 像素
sticky	粘性定位，该定位基于用户滚动的位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix
inherit	规定应该从父元素继承 position 属性的值
initial	设置 CSS 属性为它的默认值

实例

<style>
    h2 {
        position: absolute;
        left: 100px;
        top: 150px;
    }
</style>

1
2

<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位，一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面 100px 和距离页面的顶部 150px 的元素。</p>

效果

1.1 static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
意思是有关元素将按照它们在标记里出现的先后顺序出现在浏览器窗口里。

值	描述
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

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

实例

<style>
    div.static {
        position: static;
        border: 3px solid #73AD21;
    }
</style>

1
2
3

<h2>position: static;</h2>
<p>使用 position: static; 定位的元素，无特殊定位，遵循正常的文档流对象:</p>
<div class="static">该元素使用了 position: static;</div>

效果

1.2 absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>。
可以将设置的元素摆放到容纳它的“容器”的任何位置，这个容器要么是文档本身，要么是一个有着 fixed 或 absolute 属性的父元素。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

这个元素在原始标记里出现的位置与它的显示位置无关，因为它的显示位置由 top、left、right 和 bottom 等属性决定，可以用像素或百分比作为单位设置这些属性的值。
absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

实例

<style>
    h2 {
        position: absolute;
        left: 100px;
        top: 150px;
    }
</style>

1
2

<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位, 一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面 100px 和距离页面的顶部 150px 的元素。</p>

效果

1.3 fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

值	描述
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
fixed 定位使元素的位置与文档流无关，因此不占据空间。
fixed 定位的元素和其他元素重叠。

实例

<style>
    p.pos_fixed {
        position: fixed;
        top: 30px;
        right: 5px;
    }
</style>

<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

效果

1.4 relative

相对定位元素的定位是相对其正常位置。
移动相对定位元素，但它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。

值	描述
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left: 20;” 会向元素的 LEFT 位置添加 20 像素

区别是 position 属性等于 relative 的元素还可以（通过应用 float 属性等）从文档的正常显示顺序里脱离出来。
absoleute 绝对定位的意思是说，它的定位不受父元素中其他元素的影响。relative 相对定位，就是会受到父元素中其他元素影响

实例

<style>
    h2.pos_left {
        position: relative;
        left: -20px;
    }
    h2.pos_right {
        position: relative;
        left: 20px;
    }
    h2.pos_top {
        position: relative;
        top: -40px;
    }
</style>

<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left: -20px;" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left: 20px;" 向元素的原始左侧位置增加 20 像素。</p>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>

效果

1.5 sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。

值	描述
sticky	粘性定位，该定位基于用户滚动的位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)

粘性定位的元素是依赖于用户的滚动，在 position: relative; 与 position: fixed; 定位之间切换。
它的行为就像 position: relative; 而当页面滚动超出目标区域时，它的表现就像 position: fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。Safari 需要使用 -webkit- prefix。

实例

<style>
    div.sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        padding: 5px;
        background-color: #cae8ca;
        border: 2px solid #4CAF50;
    }
</style>

<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom: 2000px">
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
    <p>滚动我</p>
    <p>来回滚动我</p>
</div>

效果

2、边距

属性	描述	CSS	🔗
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移	2	🔗
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移	2	🔗
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移	2	🔗
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移	2	🔗

属性值

值	描述
auto	默认值。通过浏览器计算边缘的位置
%	设置以包含元素的百分比计的位置。可使用负值
length	使用 px、cm 等单位设置元素的位置。可使用负值
inherit	规定应该从父元素继承属性的值

对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
对于 static 元素，right 为 auto；对于长度值，right 则为相应的绝对长度；对于百分比数值，right 为指定值；否则为 auto。对于相对定义元素，left 的计算值始终等于 right。
于 static 元素，bottom 为 auto；对于长度值，bottom 则为相应的绝对长度；对于百分比数值，bottom 为指定值；否则为 auto。对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
对于绝对定位元素，bottom 属性设置单位高于/低于包含它的元素的底边。对于相对定位元素，bottom 属性设置单位高于/低于其正常位置的元素的底边。
注意：如果 “position” 属性的值为 “static”，那么设置 “top”、”right”、”bottom”、”left” 属性不会产生任何效果。

实例

<style>
    img {
        position: absolute;
        top: 0px;
    }
</style>

1 2	<img src="https://demo.qianchia.com/media/image/demo/demo1.png" width="95" height="84" /> <h1>This is a heading</h1>

效果

3、堆叠

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素。
z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

属性	描述	CSS	备注	🔗
z-index	设置元素的堆叠顺序	2		🔗

属性值

值	描述
auto	默认。堆叠顺序与父元素相等
number	设置元素的堆叠顺序，值越大就表示放上面，值越小就表示放下面
inherit	规定应该从父元素继承 z-index 属性的值

一个元素可以有正数或负数的堆叠顺序。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意：如果两个定位元素重叠，没有指定 z-index，最后定位在 HTML 代码中的元素将被显示在最前面。

实例

<style>
    img {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
    }
</style>

1
2
3

<h1>This is a heading</h1>
<img src="https://demo.qianchia.com/media/image/demo/demo1.png" width="100" height="100" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

效果

4、裁剪

如果图像大于包含它的元素，会发生什么？clip 属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。
注意：如果先有 “overflow：visible;”，clip 属性不起作用。

属性	描述	CSS	备注	🔗
clip	剪辑一个绝对定位的元素	2		🔗

属性值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect(top, right, bottom, left)
auto	默认值。不应用任何剪裁
inherit	规定应该从父元素继承 clip 属性的值

实例

<style>
    img {
        position: absolute;
        clip: rect(0px, 60px, 200px, 0px);
    }
</style>

1	<img src="https://demo.qianchia.com/media/image/demo/demo1.png" width="100" height="100" />

效果

5、光标

cursor 属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

属性	描述	CSS	备注	🔗
cursor	显示光标移动到指定的类型	2		🔗

属性值

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标
crosshair	光标呈现为十字线
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动
e-resize	此光标指示矩形框的边缘可被向右（东）移动
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize	此光标指示矩形框的边缘可被向上（北）移动
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize	此光标指示矩形框的边缘可被向下移动（南）
w-resize	此光标指示矩形框的边缘可被向左移动（西）
text	此光标指示文本
wait	此光标指示程序正忙（通常是一只表或沙漏）
help	此光标指示可用的帮助（通常是一个问号或一个气球）

实例

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

效果

请把鼠标移动到单词上，可以看到鼠标指针发生变化：

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

6、溢出

overflow 属性指定如果内容溢出一个元素的框，会发生什么。
overflow-x 属性指定如果它溢出了元素的内容区是否剪辑左/右边缘内容。
overflow-y 属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。

属性	描述	CSS	🔗
overflow	设置当元素的内容溢出其区域时发生的事情	2	🔗
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域	2	🔗
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域	2	🔗

属性值

overflow 值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

overflow-x / overflow-y 值	描述
visible	不裁剪内容，可能会显示在内容框之外
hidden	裁剪内容 - 不提供滚动机制
scroll	裁剪内容 - 提供滚动机制
auto	如果溢出框，则应该提供滚动机制
no-display	如果内容不适合内容框，则删除整个框
no-content	如果内容不适合内容框，则隐藏整个内容

实例

<style>
    div {
        background-color: #00FFFF;
        width: 150px;
        height: 150px;
        overflow: auto;
    }
</style>

1
2

<p>overflow 属性规定当内容溢出元素框时发生的事情。</p>
<div>当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。</div>