当前位置：首页 > article >正文

CSS盒子的定位＞（上篇）#定位属性#相对定位-附练习

article 2024/11/19 17:35:34

一、定位属性

1.定位方式

position属性可以选择4种不同类型的定位方式。

语法格式：position：relation | absolute | fixed
参数：①relative生成相对定位的元素，相对于其正常位置进行定位。
②absolute生成绝对定位的元素，元素的位置通过 left、top、right 和 bottom属性进行规定。
③fixed生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left、top、right以及 bottom 属性进行规定。
‼注：①两个方向各选一个参数即可定位；②定位的数值可以为负数。

二、相对定位

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的距离，到达新的位置。

position: relative;

除了要将position属性值设置为relative外，还需要一定的偏移值。

示例：

①首先创建一个HTML默认结构

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 2px red solid;
            margin: 3px;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: green;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>
<body>
    
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</body>

②添加带有相对定位方式的CSS属性

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 2px red solid;
            margin: 3px;
        }
        #div1{
            background-color: red;
            position: relative;
            left: 50px;
            top: 50px;
        }
        #div2{
            background-color: green;
            position: relative;
            left: 50px;
            top: 50px;
        }
        #div3{
            background-color: blue;
        }
    </style>
</head>
<body>
    
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</body>

运行的结果为：（由左➡右）

由以上的示例我们可以看到，使用相对定位的盒子仍在文档流中，占据原本位置，它对父容器没有影响。

🛑练习

如图：

代码如下：

    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 10px red solid;
            
            
        }
        #div2{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 10px green solid;
            position: relative;
            left: 50px;
            top: 50px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 10px blue solid;
            position: relative;
            left: -5px;
        }
        #div4{
            width: 100px;
            height: 100px;
            background-color: gray;
            
            
        }
        #div5{
            width: 100px;
            height: 100px;
            background-color: gray;
            
            
        }
        #div6{
            width: 100px;
            height: 100px;
            background-color: gray;
            
            
        }
        #div{
            width: 100px;
            height: 100px;
            background-color: white;
            border: 10px yellow solid;
  
        }
        #div11{
            width: 100px;
            height: 100px;
            background-color: white;
            border: 10px yellow solid;
           
        }
        #div22{
            width: 100px;
            height: 100px;
            background-color: white;
            border: 10px yellow solid;
     
        }
    </style>
</head>
<body>
    <img src="../../1.HTML/咖啡.jpg" id="div1">
    <img src="../../1.HTML/咖啡.jpg" id="div2">
    <img src="../../1.HTML/咖啡.jpg" id="div3"><br>
    <img src="../../1.HTML/咖啡.jpg" id="div4">
    <img src="../../1.HTML/咖啡.jpg" id="div5">
    <img src="../../1.HTML/咖啡.jpg" id="div6">
    <div id="div"></div>
    <div id="div11"></div>
    <div id="div22"></div>
</body>

查看全文

http://www.kler.cn/a/400392.html