DIV+CSS布局(二)

布局相关的属性

  1.position定位方式

    a.正常定位 relative

    b.根据父元素进行定位   absolute

    c.根据浏览器窗口进行定位  fixed

    d.没有定位  static

    e.继承 inherit

  2.定位

    left(左),right(右),top(上),bottom(下)离页面顶点的距离

  3.层覆盖先后顺序(优先级)z-index 层覆盖先后

  4.display 显示属性

    display:none 层不显示

    display:block  块状显示,在元素后面换行,显示下一个块元素

    display:inline 内联显示,多个块可以显示在一行内

eg:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Div+Css布局(布局相关的属性)</title>

    <style type="text/css">

        body{

            padding: 0;

            margin: 0;

        }

        .div{

            300px;

            height: 300px;

            background-color: green;

            position: relative;

            left: 0px;

            top: 10px;

        }

        span{

            position: absolute;

            background-color: #ff6600;

            color: #fff;

            top: 10px;

            right: 0px;

        }

        .fixed{

            position: fixed;

            background-color: #ff6600;

            color: #fff;

            top: 100px;

            display: none;

        }

    </style>

</head>

<body>

    <div class="div">

        <span>浏览次数:222</span>

    </div>

<div class="fixed">

    <p>联系电话:23423423</p>

    <p>联系QQ:234324657</p>

    <p>联系地址:5676575</p>

</div>

<br/>

</body>

</html>

原文地址:https://www.cnblogs.com/lzp1103/p/7908039.html