CSS positioning property position_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS positioning property position_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:57:59

Original

1091 people have browsed it

There are three ways to position elements in CSS: normal flow, relative position, and absolute position. This is achieved by setting the position attribute.

The meaning of the position attribute value

inherit

position属性取值的含义

inherit	继承父元素position 属性的值。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative	生成相对定位的元素，相对于元素本身正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute	生成绝对定位的元素，找到第一个非static的祖先元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

Inherit the value of the position attribute of the parent element.

static

Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

relative

Generates a relatively positioned element, relative to the normal position of the element itselfPosition. Therefore, "left:20" adds 20 pixels to the element's LEFT position.

absolute

Generate absolutely positioned elements and find thefirst non-static one Ancestor ElementsPositioned. The position of the element is specified via the "left", "top", "right" and "bottom" attributes.

fixed

Generates an absolutely positioned element, relative to the browser window strong>Position. The position of the element is specified via the "left", "top", "right" and "bottom" attributes.

例子1：static普通流定位，红色div的top属性失效<body>    <div style="border: solid 1px #0e0; width: 200px;">        <div style="height: 100px; width:100px; background-color:red; top:20px;"></div>        <div style="height:100px; width:100px; background-color:green; "></div>        <div style="height:100px; width:100px; background-color:blue;"></div>     </div></body>

Copy after login

例子2：relative相对位置,绿色div相对static的位置向右和向下移动了20px，绿色div原来的文档位置还在。<body>    <div style="border: solid 1px #0e0; width: 200px;">        <div style="height: 100px; width:100px; background-color:red; top:20px;"></div>        <div style="height:100px; width:100px; background-color:green; position:relative; top:20px; left:20px;"></div>        <div style="height:100px; width:100px; background-color:blue;"></div>     </div></body>

Copy after login

例子3.1：absolute绝对位置(不占有原来的文档流位置)，没有指定父元素div的position属性，则绿色div的父级div是static定位，所以不选这个div做参照，选window作为参照<body>    <div style="border: solid 1px #0e0; width: 200px;">        <div style="height: 100px; width:100px; background-color:red; top:20px;"></div>        <div style="height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></div>        <div style="height:100px; width:100px; background-color:blue;"></div>     </div></body>

Copy after login

Ordinary flow positioning is: static, default positioning Relative positioning is: relative relative to the position of the element itself as a normal flow, occupying the document The original position of the stream

There are two types of absolute positioning: absolute and fixed. One is relative to its first non-static ancestor element, and the other is relative to the browser window. Neither of them occupies the original document stream position

例子3.2：absolute绝对位置，父级div的position是relative，不再是static，所以选父级div为参考。<body>    <div style="border: solid 1px #0e0; width: 200px; position:relative;">        <div style="height: 100px; width:100px; background-color:red; top:20px;"></div>        <div style="height:100px; width:100px; background-color:green; position:absolute; top:20px; left:20px; "></div>        <div style="height:100px; width:100px; background-color:blue;"></div>     </div></body>

Copy after login

例子4：fixed绝对位置，相对于窗口window的，不占文档流位置。<body>    <div style="border: solid 1px #0e0; width: 200px; position:relative;">        <div style="height: 100px; width:100px; background-color:red; top:20px;"></div>        <div style="height:100px; width:100px; background-color:green; position:fixed; bottom:20px; left:20px; "></div>           <div style="height:100px; width:100px; background-color:blue;"></div>     </div></body>

Copy after login