Css position:fixed 顶部固定层定位案例

代码:

[cce]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
       /* position: fixed;*/
    }
    .box2 {
        width: 100px;
        height: 35px;
        background: green;
        margin-top: 15px;
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce]

在没设置定位前,为两个Box。现设置box1为position:fixed

box1脱离文档流,box2自动占位,box2的外边距自动变为box1的外边距。

如想保持原图不变进行如下设置:

[cce_html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .box1 {
        width: 100px;
        height: 35px;
        background: red;
        position: fixed;
        top:0;/*设置置顶*/
    }
    .box2 {
        width: 100px;
        height: 50px;
        background: green;
        margin-top: 50px;/*设置外边距是原外边距和box1高度之和*/
    }
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
    
</body>
</html>
[/cce_html]

显示效果:

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>