css relative positioning-CSS Tutorial-php.cn

css relative positioning

无忌哥哥

Release： 2018-06-28 17:53:19

Original

2504 people have browsed it

Four modes of positioning: static, relative, absolute, fixed

Four positions of positioning: left, right, top, bottom

Positioning attribute: position, there are four states Value

1.static: Static positioning, arranged in the order of elements in the document flow, this is the default value, the four positions are invalid

2.relative: Relative positioning, the element is relative to the original It is positioned in the document flow, four positions are valid

3.absolute: Absolute positioning, the element is positioned relative to its positioning parent, out of the document flow, four positions are valid

4.fixed: Fixed positioning, similar to the absolute positioning class, is also separated from the document flow. The position of the element on the page is fixed and does not scroll with the page. Four positions are valid

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1.相对定位</title>
    <style>
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
 position: relative;
            top:0;
            left:200px;
        }
        .box2 {
            width:200px;
            height: 200px;
            background-color: lightgreen;
            /*position: static;*/
        }
        .box3 {
            width:200px;
            height: 200px;
            background-color: lightcoral; /*珊瑚色*/
            /*position: static;*/
            /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
            position:relative;
            top: -200px;
            left: 400px;
        }
        .box4 {
            width:200px;
            height: 200px;
            background-color: brown;
            /*position: static;*/
            /*相对定位:十字架,这个色块距顶为-200px,距左为400px*/
            position:relative;
            top: -200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

Copy after login

The above is the detailed content of css relative positioning. For more information, please follow other related articles on the PHP Chinese website!