构建静态页面 之 [ 定位 ]

头像
蔡志远
    阅读 5 分钟

    定位

    position属性

    • 表示设置定位

      • 绝对定位
      • 固定定位
      • 相对定位

    绝对定位

    • position : absolute - 表示设置绝对定位

    • 绝对定位的注意

      1. 设置绝对定位后，当前元素脱离文档流
      2. 如果指定元素的父级元素是<body>元素 - 该元素就是相对于当前页面的定位
      3. 如果指定元素的父级元素不是<body>元素，父级元素没有开启定位 - 该元素就是相对于当前页面的定位
      4. 如果指定元素的父级元素不是<body>元素，父级元素开启定位 - 该元素就是相对于父级元素的定位
    <head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /*
                position: absolute - 表示设置绝对定位
                * 可以通过 上、右、下、左、四个方向来设置定位后元素显示的位置
                绝对定位的注意
                * 设置绝对定位后，当前元素脱离文档流
                * 如果指定元素的父级元素是<body>元素 - 该元素就是相对于当前页面的定位
                * 如果指定元素的父级元素不是<body>元素，父级元素没有开启定位 - 该元素就是相对于当前页面的定位
                * 如果指定元素的父级元素不是<body>元素，父级元素开启定位 - 该元素就是相对于父级元素的定位
             */
            margin: 100px;

            position: absolute;
            top: 100px;
            left: 100px;
        }
        #d2 {
            width: 100px;
            height: 100px;
            background-color: green;

            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

    9527
    9534
    9544

    固定定位

    • position: fixed - 表示设置固定定位
    • 设置固定定位的元素会脱离文档流
    • 固定定位是相对于浏览器显示窗口定位显示位置
    • 设置固定定位的元素，不会跟着页面滚动而滚动
    <head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body {
            margin: 0;
            height: 2000px;
        }
        div {
            width: 200px;
            height: 200px;
        }
        /*
            position: fixed - 表示设置固定定位
            * 设置固定定位的元素会脱离文档流
            * 固定定位是相对于浏览器显示窗口定位显示位置
            * 设置固定定位的元素，不会跟着页面滚动而滚动
         */
        #d1 {
            background-color: red;
            position: fixed;
            top: 100px;
            left: 100px;
        }
        #d2 {
            background-color: green;
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

    9551

    相对定位

    • position: relative - 表示设置相对定位
    • 设置相对定位的元素不会脱离文档流
    • 相对定位是相对于元素本身原本的位置定位
    <head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: red;

            position: absolute;
            top: 100px;
            left: 100px;
        }
        /*
            position: relative - 表示设置相对定位
            * 设置相对定位的元素不会脱离文档流
            * 相对定位是相对于元素本身原本的位置定位
         */
        #d2 {
            width: 100px;
            height: 100px;
            background-color: green;

            margin-left: 100px;

            position: relative;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

    9559

    堆叠

    • 表示元素之间出现的重叠效果

    • z-index属性 - 表示设置堆叠的显示

      • z-index属性只能出现在开启定位的元素中
      • z-index属性值大的覆盖z-index属性值小
      • z-index属性的属性值为数字值
    <head>
    <meta charset="UTF-8">
    <title>堆叠</title>
    <style>
        /*
            堆叠 - 表示元素之间出现的重叠效果
            * z-index属性 - 表示设置堆叠的显示
            * z-index属性值大的覆盖z-index属性值小
            * z-index属性只能出现在开启定位的元素中
            * z-index属性的属性值为数字值
         */
        body {
            margin: 0;
        }
        div {
            width: 200px;
            height: 200px;
        }
        #d1 {
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            z-index: 2;
        }
        #d2 {
            background-color: green;
            position: relative;
            left: 50px;
            top: 50px;
            z-index: 1;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

    image

    继承

    • 表示CSS的样式属性可以作用在指定元素的后代元素上

    • CSS的样式属性分为

      1. 可继承的属性 - 表示指定元素的样式可以作用在其所有的后代元素上
      2. 不可继承的属性 - 表示只能作用在指定元素
    • inherit - 表示可以选择是否为继承属性
    <head>
    <meta charset="UTF-8">
    <title>继承</title>
    <style>
        /*
            继承 - 表示CSS的样式属性可以作用在指定元素的后代元素上
            * CSS的样式属性分为
             * 可继承的属性 - 表示指定元素的样式可以作用在其所有的后代元素上
             * 不可继承的属性 - 表示只能作用在指定元素
            * inherit - 表示可以选择是否为继承属性
         */
        body {
            font-size: 12px;
        }
        p {
            /* 当前样式属性的值继承于祖先元素 */
            font-size: inherit;
        }

    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, architecto asperiores aspernatur, beatae dolor esse excepturi fuga iusto labore mollitia odit quae quisquam rem repellat sit unde velit? Magnam, rem!</p>
</body>
    htmlcss
    蔡志远
    9 声望5 粉丝
    « 上一篇
    构建静态页面 之 [ 表单 ]
    下一篇 »
    构建静态页面 之 [ 布局 ]

    引用和评论

    推荐阅读
    头像
    Ajax 之 [ jQuery中的Ajax ]

    蔡志远阅读 1.3k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.5k评论 3

    0 条评论
    得票最新