深入理解position: fixed

  1. 云栖社区>
  2. 博客列表>
  3. 正文

深入理解position: fixed

cometwo123 2016-03-13 17:22:00 浏览560 评论0

摘要: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>深入理解position: fixed;</title> <style type="text/cs...

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>深入理解position: fixed;</title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            #header {
                position: fixed;
                width: 900px;
                height: 100px;
                background: red;
                top: 0px;
                left: 0px;
                /*居中办法*/
                right: 0px;
                margin: 0 auto;
            }

            #mian {
                width: 900px;
                height: auto;
                background: #000000;
                padding-top: 10px;
                padding-bottom: 10px;
                margin: 100px auto 0px;
            }

            h1 {
                width: 95%;
                text-align: center;
                color: yellow;
                background: blue;
                margin: 0px auto 10px;
            }

            h1:nth-child(2n) {
                background: green;
            }

            h1:last-child {
                margin-bottom: 0px;
            }

            .wbd {
                width: 300px;
                height: 50px;
                line-height: 50px;
                border-radius: 10px;
                background: green;
                text-align: center;
                margin-top: 25px;
                font-size: 38px;
                margin-left: 300px;
                box-shadow: 0px 0px 115px blue;
                text-shadow: 0px 0px 15px red;
            }
        </style>
    </head>

    <body>
        <div id="header">
            <div class="wbd">我不动</div>
        </div>
        <div id="mian">
            <h1>1</h1>
            <h1>2</h1>
            <h1>3</h1>
            <h1>4</h1>
            <h1>5</h1>
            <h1>6</h1>
            <h1>7</h1>
            <h1>8</h1>
            <h1>9</h1>
            <h1>10</h1>
            <h1>11</h1>
            <h1>12</h1>
            <h1>13</h1>
            <h1>14</h1>
            <h1>15</h1>
            <h1>16</h1>
            <h1>17</h1>
            <h1>18</h1>
            <h1>19</h1>
            <h1>20</h1>
        </div>
    </body>

</html>
【云栖快讯】你想见的Java技术专家都在这了,向大佬提问,有问题必答  详情请点击

网友评论

cometwo123
文章2699篇 | 关注28
关注
Node.js 性能平台(Node.js Performance Platform)是面向中... 查看详情
立足于对政务信息化的深刻理解,在云计算和大数据技术上持续创新,构筑开放共享、敏捷高效、安全可... 查看详情
是基于语音识别、语音合成、自然语言理解等技术,为企业在多种实际应用场景下,赋予产品“能听、会... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
阿里云总监课正式启航

阿里云总监课正式启航