Positioning in CSS3 (against the war classes)

By learning this week against the war classes, understand the basic CSS3 positioning values, classification and function.
First of all we need to know in CSS3 , the float ( float ) mainly to solve the problem about the arrangement, while positioning ( position ) the main problem is superimposed arrangement.

Location values are divided into four categories: the relative positioning ( position relative ), absolute positioning ( position Absolute ), fixed positioning ( position Fixed ), viscous positioning ( position Sticky ).

Relative positioning ( position relative ): without the element from the document flow, the space will be reserved, does not affect the layout of other elements. If the offset is not located, it has no effect on the element itself, if the present offset is an offset position according to the current element;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        #box1{ width:100px; height:100px; background: red;}
        #box2{ width:100px; height:100px;background-color: blue; position: relative; left: 10px; top: 10px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

Absolute positioning ( position Absolute ): the element completely out of the document flow, so have the characteristics of inline elements block elements, so that the block elements characteristic of support inline elements. If the absolute positioning of elements there is a positioning parent container, the container will be shifted relative to the parent, if the parent container is positioned does not exist, is offset with respect to the entire document;

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1{width: 100px; height: 100px; background-color: blue;}

.box2{width: 100px; height: 100px;background-color: red; position: absolute;top: 50px; left: 50px;}

</style>

</head>

<body>

</div>

</body>

</html>

Fixed positioning ( position Fixed ); and absolute positioning Comparative Similarly causes the document from the document stream the inline elements have characteristics of block elements, so that the block elements have characteristics of inline elements, but the difference is fixed positioning ( position Fixed ) with respect to the entire browser window offset.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{width: 100%; height: 1000px;}
        .box2{width: 100px; height: 100px;background-color: red; position: fixed;top: 100px; left: 0;}
    </style>
</head>
<body>
   <div class="box1">
       <div class="box2"></div>
   </div>
</body>
</html>

固定定位是不会改变位置的，浏览器滚动条滑动，其位置也不会改变。
粘性定位（position sticky）的主要作用就是在没有达到指定位置时，是没有定位效果的，到达了指定位置后，就会变成固定定位。
定位的偏移都是由方向left、right、top、bottom加上值组成的，单位为px；例如：left：50px就是向左偏移50个像素，取值可以为负数。

Positioning in CSS3 (against the war classes)

Guess you like