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

CSS盒子的定位＞（中篇）#绝对定位#附练习

article 2024/11/15 15:21:00

一、绝对定位

1.概念：

相对于已经定位的上层元素（即使用了position）进行定位；若上层元素没有定位，则向更上层寻找已定位元素，直至根元素。（脱离文档流）

2.代码属性：

CSS代码添加

position：absolut

水平方向：left、right

垂直方向：top、bottom

3.‼注：

①两个方向各选一个参数即可定位。

②定位的数值可以为负数。

③设置了绝对定位的盒子，都有专属浮层，由几个绝对定位的盒子，就有几个浮层。

4.示例

①首先创建一个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: absolute;
            left: 50px;
            top: 50px;
        }
        #div2{
            background-color: green;
         
        }
        #div3{
            background-color: blue;
        }
        article{
            width: 600px;
            height: 600px;
            background-color: gray;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <article>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</article>
</body>

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

绝对定位的盒子从标准流中脱离，对其后的兄弟盒子定位没有影响，其他盒子就好像整个盒子不存在一样。原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后，生成一个块级框，与原来它在正常流中生成的框无关。

5.练习：

如图：

代码如下：

    <style>
         div{
            width: 100px;
            height: 100px;
            background-color: gray;
            
            margin: 3px;
        }
        #div1{
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute;
            left: 100px;
            top: 80px;
        }
        #div2{
            width: 50px;
            height: 50px;
            background-color: white;
            position: absolute;
            left: 300px;
            top: 80px;
         
        }
        #div3{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 200px;
            top: 160px;
        }
        #div4{
            width: 30px;
            height: 30px;
            background-color: green;
            position: absolute;
            left: 210px;
            top: 170px;
        }

        article{
            width: 450px;
            height: 450px;
            background-color: gray;
            position: absolute;
            left: 500px;
            top: 100px;
        }
        #div5{
            width: 170px;
            height: 38px;
            background-color: white;
            position: absolute;
            left: 100px;
            top: 250px;
            padding-left: 80px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <article>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5">绝对定位练习</div>
    </article>
</body>

查看全文

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