构建静态页面 之 [ 定位 ]

2019年9月7日 97次阅读 来源: 蔡志远

定位

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>

《构建静态页面 之 [ 定位 ]》
《构建静态页面 之 [ 定位 ]》
《构建静态页面 之 [ 定位 ]》

固定定位

  • 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>

《构建静态页面 之 [ 定位 ]》

相对定位

  • 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>

《构建静态页面 之 [ 定位 ]》

堆叠

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

  • 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>

《构建静态页面 之 [ 定位 ]》

继承

  • 表示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>
    原文作者：蔡志远
    原文地址: https://segmentfault.com/a/1190000016155359
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞