CSS（10） Position(定位)

一、position 属性

指定了元素的定位类型。

position 属性的五个值：

• static
• relative
• fixed
• absolute
• sticky

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

1、static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

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

div.static {
    position: static;
    border: 3px solid #73AD21;
}

尝试一下 »

2、fixed 定位

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

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

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

尝试一下 »

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

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

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

css固定元素位置(position:fixed)

body{
    background-image:url(about:blank); /* for IE6 */
    background-attachment:fixed; /*必须*/
}

#ads{
    width:300px;
    height:250px;
    position:fixed;
    right:0;
    bottom:0;
    border:1px solid red;
    _position:absolute; /* for IE6 */
    _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
    
}

3、relative 定位

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

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

尝试一下 »

移动相对定位元素，但它原本所占的空间不会改变。

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

尝试一下 »

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

4、absolute 定位

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

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

尝试一下 »

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

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

5、sticky 定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 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 (查看以下实例)。

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

尝试一下 »

6、重叠的元素：z-index属性

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

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

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

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

尝试一下 »

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

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

二、CSS 布局 - overflow、overflow-x、overflow-y

CSS overflow 属性用于控制内容溢出元素框时显示的方式。

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

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

注意:overflow 属性只工作于指定高度的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

overflow: visible

默认情况下，overflow 的值为 visible， 意思是内容溢出元素框：

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

尝试一下 »

三、CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

1、隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

尝试一下 »

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

尝试一下 »

2、CSS 块和内联元素

1、块级元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。总是独占一行。

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

2、内联元素

内联元素只需要必要的宽度，不强制换行。和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

3、可变元素

(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

3、CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

• display:block -- 显示为块级元素
• display:inline -- 显示为内联元素
• display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将list元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

4、如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

li {display:inline;}

尝试一下 »

下面的示例把span元素作为块元素：

span {display:block;}

尝试一下 »

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

四、clip

剪辑一个绝对定位的元素。值：shape、auto、inherit

裁剪一张图像：

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

尝试一下 »