css固定定位

无忌哥哥 原创: 2018-06-28 17:58:29 1769浏览

定位的四种模式:static,relative,absolute,fixed

定位的四个位置:left,right,top,bottom

定位属性:position,有四种状态值

1.static:静态定位,按元素在文档流中的顺序排列,这是默认值,四个位置无效

2.relative:相对定位,元素相对于原来它在文档流中的位置进行定位,四个位置有效

3.absolute:绝对定位,元素相对于它的定位父级定位,脱离文档流,四个位置有效

4.fixed:固定定位,与绝对定位类类似,也脱离了文档流,元素在页面上的位置固定,不随页面滚动,四个位置有效

<!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>

以上就是css固定定位的详细内容，更多请关注php中文网其它相关文章！

css，css定位，css固定定位 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css绝对定位下一条：css浮动的原理