css 定位

最新推荐文章于 2025-07-17 20:57:17 发布

原创最新推荐文章于 2025-07-17 20:57:17 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#定位

css 专栏收录该内容

52 篇文章

订阅专栏

css 定位比如说是absolute 定位

定位后元素还在那里只不过是浮动了起来，但是还是在浮动的上空，只有设置left 和 top 后才会跑到其相对定位的地方

绝对定位相对的父元素如果overflow:hidden 的话，绝对定位的元素的超出高度或者宽度如果超过相对定位的父元素的高度和宽度是显示不出来的超过之后元素都不显示了，管你浮动不浮动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@1.0.8/dist/vue.js"></script>
    </head>
    <style>
        .aa {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute ;
        }
        .bb{
            height:100px;
            background: #000;
        }
    </style>

    <body id="cc">
        <table
            border="8"
            cellspacing="0"
            width="500"
            style="border:1px solid red"
        >
            <thead>
                <th>姓名</th>
                <td>年龄</td>
                <td>身高</td>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align:center">
                        pqs
                    </td>
                    <td>28</td>
                    <td>170</td>
                    
                </tr>
                 <tr>
                    <td style="text-align:center">
                        pqs
                    </td>
                    <td>28
                        <div class="aa"></div>
                    </td>
                    <td>170
                        
                    </td>
                    
                </tr>
                 <tr>
                    <td style="text-align:center">
                        pqs
                    </td>
                    <td>28</td>
                    <td>170</td>
                    
                </tr>
                 <tr>
                    <td style="text-align:center">
                        pqs
                    </td>
                    <td>28</td>
                    <td>170</td>
                    
                </tr>
            </tbody>
        </table>
        <div class="aa"></div>
        <div class="bb"></div>
    </body>
</html>