bottom 属性规定元素的底部边缘

最新推荐文章于 2023-11-24 15:49:41 发布

原创最新推荐文章于 2023-11-24 15:49:41 发布 · 901 阅读

1 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

10 篇文章

订阅专栏

本文通过一个简单的HTML页面展示了如何使用CSS的相对定位和绝对定位来实现元素的精确布局。底部固定灰色条的效果清晰呈现了这两种定位方式的应用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1{
            position: relative;
            height:300px;
            width:90%;
            background-color: #CCFFFF;
        }
        #div2{
            position: absolute;
            bottom:0;
            height:30px;
            width:100%;
            background-color: #666666;
        }
    </style>
</head>
<body>
<p>底部边缘</p>
<div id="div1">
    <div id="div2">底下</div>
</div>
</body>
</html>