Web front-end articles: css positioning

Positioning is a fairly complex topic, before going in-depth understanding of positioning, let's talk about before we shed a standard document layouts.
Application: small ad pages, return to the top of the UI.

1.Position property

Targeting: top, right, bottom, left properties determine the final position of the element.

2. Static positioning
Static positioning means "element of the default display position in the document flow." No change.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态定位</title>
    <style type="text/css">
        .positioned{
            position: static;
            background-color: red;
        }
    </style>
</head>
<body>
    <p class="positioned">我是静态定位的元素</p>
</body>
</html>

Click to receive free information and courses

3. The relative positioning

The relative positioning of the elements is offset normal position in the document, but does not offset the impact of other elements.
Reference points: to locate their original position, can top, left, right, bottom of the element offset.

phenomenon:

   不脱离标准文档流，单独设置盒子相对定位之后，。不用top,left,right,bottom对元素进行偏移，那么与普通的盒子没什么区别。
    有压盖现象。用top,left,right,bottom对元素进行偏移之后，明显定位的元素的层级高于没有定位的元素(用top,left,right,bottom层级低)。

4. Absolute positioning

And the relative positioning of elements without departing from the standard document flow, and absolutely positioned elements are out of the document flow. In the standard flow of the document, if a box set absolute positioning, then the element does not occupy space. And absolutely positioned elements with respect to the most recent non-static ancestor element positioning. When such ancestor element does not exist, with respect to the upper left corner of the page to locate the root element.
Click to receive free information and courses

Reference point:

 相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面左上角进行定位。

5. Application

Relative positioning of the box, typically for "child must parent phase", the reference layout pattern

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            background-color:red;
            position: relative;
        }
        div .c1{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        div .c2{
            width: 100px;
            height: 100px;
            background-color:greenyellow;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1">子1</div>
        <div class="c2">子2</div>

    </div>
</body>
</html>
子绝父相

6.z-index:
Click to receive free information and courses
z-index has the following rules:

z-index is only used in the positioning element, the default z-index: auto;

      z-index取值为整数，数值越大，它的层级越高。
     如果元素设置了定位，没有设置z-index,那么谁写在后面的表示谁层级越高。
   从父现象，通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值越大，表示子元素的层级越高。

Web front-end articles: css positioning

1.Position property

Guess you like