美文网首页- [ CSS入门 ]
二十,CSS定位概述与相对定位

二十,CSS定位概述与相对定位

作者: 好多可乐 | 来源:发表于2020-12-23 15:57 被阅读0次

    CSS定位:
    position:relative(相对)/absolute(绝对)/ static(无定位)/ fixed(固定)
    文档流:从上往下,从左到右
    相对定位:
    relative:相对于自己以前所在的位置进行定位,效果如下图(本来在左上角,设置相对定位和top,left属性后,红色方块进行了移动)

    在这里插入图片描述

    如果设置了相对定位以后,不输入具体的top/left值,这样相对定位可以做为一种容器父元素存在。

    <html>
    <head>
       <style type="text/css">
       .main{
        background-color: yellow;
       }
       .div1{
        height: 100px;
        width: 100px;
        position: relative;
        top: 10px;
        left: 20px;
        background-color: red;
       }
       </style>
    </head>
    <body>
     <div class="main">
    

    相关文章

      网友评论

        本文标题:二十,CSS定位概述与相对定位

        本文链接:https://www.haomeiwen.com/subject/vkfunktx.html