Home > Article > Web Front-end > css absolute positioning

css absolute positioning

无忌哥哥Original: 2018-06-28 17:56:521947browse

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>2.绝对定位</title>
    <style>
        /*body {*/
            /*border: 1px solid red;*/
        /*}*/
        .box {
            width: 600px;
            height: 600px;
            background-color: yellow;
        }
        .box1 {
            width:200px;
            height: 200px;
            background-color: lightskyblue;
                  position: absolute;
                  top:0;
            right:0;
}
        .box2 {
            width:200px;
            /*width:250px;*/
            height: 200px;
            /*height: 250px;*/
            background-color: lightgreen;
        }
        .box3 {
            width:200px;
            height: 200px;
            background-color: lightcoral; /*珊瑚色*/
        }
        .box4 {
            width:200px;
            height: 200px;
            background-color: brown;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
</div>
</body>
</html>

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

css Static position

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css relative positioningNext article：css relative positioning

See more

css absolute positioning

Related articles