Summary of position attribute_html/css_WEB-ITnose-HTML Tutorial-php.cn

Summary of position attribute_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:58:32

Original

1170 people have browsed it

The position attribute specifies the positioning type of the element

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

Value description

absolute
Absolute positioning

值描述

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

Generate absolutely positioned elements, Positioned relative to the first parent element other than static positioning.

The position of the element is specified through the "left", "top", "right" and "bottom" attributes.

fixed
Fixed positioning

Generate absolutely positioned elements, positioned relative to the browser window.

The position of the

element is specified through the "left", "top", "right" and "bottom" attributes.

relative
Relative positioning

Generates a relatively positioned element, positioned relative to its normal position.

So "left:20" adds 20 pixels to the element's LEFT position.

static

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

inherit

Specifies that the value of the position attribute should be inherited from the parent element.

Images can be superimposed when used with z-index. The default z-index is 0. The value increases from small to large, and the priority increases (that is, the element on the surface has the highest priority)

The above is excerpted from W3C’s definition of position

After trying and searching for information, I summarized the following points:

1. static, inherit: Well, I happily decided to ignore it. Come on (sweat!!!);

<html>    <head>        <style type="text/css">            .div1{                position: relative;                border: 10px solid red;                padding: 10px;                width: 100px;                height: 100px;                background-color: green;                background-clip: content-box;            }            .div2{                positon: absolute;                width: 50px;                height: 50px;                background-color: yellow;                left: 10px;//此处left会以padding开始定位            }        </style>    </head>    <body>        <div class='div1'>div1            <div class='div2'>div2</div>        </div>    </body></html>

Copy after login

2. fixed: positioned relative to the visible part of the browser; (depends on the browser)

3. relative: positioned relative to the normal flow ; (Depends on the normal position of the element itself)

4. Absolute: Positioning relative to the first parent element whose position attribute is not static (it’s really a twist, this is something I didn’t grasp at the beginning. If There is no position attribute in the parent element, or the position attributes are all static, which will rely on body positioning)

Of course, there are four diamonds in the box model: content, padding, border, and margin. Keep in mind that absolute will position

based on content adding (that is, the position where padding starts). Rendering:

 1 <html> 2     <head> 3         <style type="text/css"> 4             .div1{ 5                 position: relative; 6                 border: 10px solid red; 7                 padding: 10px; 8                 width: 100px; 9                 height: 100px;10                 background-color: green;11                 background-clip: content-box;12             }13 14             .div2{15                 positon: absolute;16                 width: 50px;17                 height: 50px;18                 background-color: yellow;19                 margin: 10px;20             }21         </style>22     </head>23 24     <body>25         <div class='div1'>div126             <div class='div2'>div2</div>27         </div>28     </body>29 </html>

Copy after login

A pitfall was discovered during the experiment! ! ! ! ! ! What will be the effect if left is changed to margin in the above code?

Although only one attribute has been changed, please attach the code:

Still the rendering:

The margin attribute is based on the content of the parent element.

Hmm, don’t be fooled next time.