欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

css绝对定位

程序员文章站 2022-05-01 12:15:44
...
定位的四种模式: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绝对定位的详细内容，更多请关注其它相关文章！

相关标签： css，css定位，css绝对定位

上一篇： java删除文件和文件夹具体实现

下一篇： php正则表达式模式匹配实例教程

推荐阅读