css fixed positioning-CSS Tutorial-php.cn

css fixed positioning

无忌哥哥

Release： 2018-06-28 17:58:29

Original

2467 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>4.固定定位</title>
    <style>
        body {
            /*将页面高度设置为2000px,使之出现垂直滚动条*/
            height:2000px;
        }
        .box {
            width: 200px;
            height: 260px;
            /*background-color: #6CF;*/
            /*固定定位fixed:元素脱离文档流,相对于窗口定位,固定在页面上,并且不随页面滚动*/
            /*可以当作是绝对定位的一个特例来看待*/
            position:fixed;
            top: 200px;
            left:50px;
        }
    </style>
</head>
<body>
<!--<div></div>-->
<!--以在线QQ客服为例进行演示-->
<div><img src="../images/qq.png" alt="" width="200"></div>
</body>
</html>

Copy after login

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