博客列表 >前端布局-固定定位实现小广告

前端布局-固定定位实现小广告

空城的博客
空城的博客原创
2019年01月17日 13:36:42715浏览

固定定位可以看做绝对定位的一种特例,相比与绝对定位寻找父级的位置,固定定位直接寻找最顶级的位置

实例

<!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>前端布局-固定定位实现小广告</title>
    <!-- <link rel="stylesheet" href="staic/css/style03.css"> -->
    <style>
        body {
            height: 2000px;
        }

        .guanggao {
            position: fixed;
            width: 450px;
            height: 450px;
            background-color: #ccc;
            text-align: center;
            right: 0px;
            bottom: 0px;

        }

        h2 {
            line-height: 450px;
        }

        .guanggao button {
            float: right;
            background-color: red;

        }
    </style>
</head>

<body>

    <div class="guanggao">
        <button onclick="this.parentNode.style.display = 'none'">关闭</button>
        <h2>澳门赌场,线上招商</h2>
    </div>
</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议