css绝对定位

无忌哥哥 原创: 2018-06-28 17:56:52 1404浏览

定位的四种模式: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>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>

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

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

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

上一条：css相对定位下一条：css固定定位