牛客前端宝典——刷题 ##Day6

当一个元素的定位属性设置为”inherit”时，表示从父元素继承定位属性。现在虽然类名为”inner”的里盒子设置了”left: 10px”属性，但是这是无效的，因为该盒子的定位属性值为”static”。现在给里盒子添加”position: inherit”属性，表示从类名为”outer”的父级外盒子继承定位属性，现在发现里盒子的”left: 10px”属性依然没有生效，因为外盒子的定位值依然是”static”。最后再给外盒子添加”position: relative”属性，此时会发现里盒子向右移动了10px，定位属性”left”生效了。
完成以上所讲的步骤即可通过测试，进入下一节的学习吧。

根据题目所示是对定位属性的讲解，题目描述非常清楚，当一个元素的定位属性设置为”inherit”时，表示从父元素继承定位属性。那么现在开始解题吧。

描述三：定位 – absolute

绝对定位会把元素拿出文档流，不会再占据原来的空间。绝对定位元素的父级是距离该元素最近的定位祖先，也就是”position”属性不为”static”的最近任意祖先。如果没有这个定位祖先，那么绝对定位元素就相对于文档的根元素”html”进行定位。
当前类名为”outer”、”middle”、”inner”的盒子（外、中、里盒子）嵌套在一起，现在给三个盒子均设置左内边距10px，再自定义盒子背景颜色以便于观察。再给里盒子设置绝对定位属性”position: absolute“，会发现里盒子的位置并没有发生改变，因为绝对定位的默认位置是当前绝对定位盒子在流中的位置。继续给里盒子设置”left: 0px”属性，观察到里盒子是根据最外层盒子定位的，直接绕过了中间盒子，这是由于中间盒子的定位属性为默认的”static”，此时再给中间盒子设置定位属性”position: absolute”，会发现里盒子现在是根据中间盒子重新定位的。

根据题目所示是对绝对定位知识的考查，如果不清楚绝对定位的可以看一下我对绝对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。

描述四：定位 – absolute – 评注

绝对定位非常适合创建弹出层、提示和对话框等覆盖于其他内容之上的组件。比如有一篇文章，可以给文章添加一些行内的评注，最好以气泡图的样式显示在文章外部的空白区域中。
绝对定位的元素默认会待在自己还在流中时的地方，现在给“aside”盒子设置绝对定位属性”position: absolute”，此时”aside”盒子从流中出来并且覆盖住了下方的元素，现在可以将它向左移动一些，把它定位到文章内容的左边。”article”盒子的左外边距为10rem，想让”aside”评注放在左边空白处的中间，需要进行计算，这里省略计算步骤。现在只需要将评注组件向左移动9rem即可。现在给评注组件设置”margin-left: -9rem”，在CSS中，负边距是完全有效的，负左外边距可以将元素往左拉，其他有趣的效果这里不做赘述。此时观察效果，评注在”相煎何太急？”内容的左边，可以很醒目的告诉读者该句的意思。

根据题目所示是对绝对定位知识的考查，如果不清楚绝对定位的可以看一下我对绝对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。

描述五：定位 – z-index

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。z-index可以设置为负数，且该属性只能作用于定位元素。
现在给”img”图片标签添加”position: absolute”、”left: 0px”和”top: 0px”属性，此时会发现图片被定绝对定位在了页面的左上角，并且遮挡住了下方的内容。现在继续给图片标签添加”z-index: -1″属性，现在图片堆叠在了字体内容的下方。

根据题目所示是对定位 z-index 知识的考查，如果不清楚 z-index 定位的可以看一下我对定位 z-index讲解的文章，上面已经给出链接，那么现在开始解题吧。

描述六：定位 – relative

相对定位的元素仍然会待在原来的地方，即不会从流中出来。此后可以通过”top”、”right”、”bottom”和”left”属性使元素相对于初始位置进行移动。现在给类名为”center”的盒子设置相对定位属性”position: relative”、设置”left: 50px”、设置”top: 50px”，再自定义背景颜色以便于观察。此时可以观察到中间盒子在原始的位置上向右、向下均移动了50px的距离，并且保留了原来的空间。

根据题目所示是对相对定位知识的考查，如果不清楚相对定位的可以看一下我对相对定位讲解的文章，上面已经给出链接，那么现在开始解题吧。

描述七：定位 – fixed

固定定位是由绝对定位衍生出来的，不同之处在于，固定定位元素的父级始终是视口。因此固定定位可以用来创建始终停留在窗口相同位置的元素。比如：固定侧栏、固定顶栏等。这样方便用户，不必再费事寻找栏目。
现在给”nav”盒子设置固定定位属性”position: fixed”、设置”top: 0″、设置自定义宽度、背景颜色。此时滑动滚轮，可以发现”nav”盒子始终固定在页面的最上方。但是，数字1却被覆盖了。由于固定定位的盒子不在流中，所以遮盖住了下方的元素。此时再给”section”盒子设置上外边距为1rem，此时1数字正常出现了。固定定位需要注意下方是否有元素被遮挡。

根据题目所示是对固定定位知识的考查，如果不清楚固定定位的可以看一下我对固定定位讲解的文章，上面已经给出链接，那么现在开始解题吧。

描述八：定位 – fixed – 广告

固定定位不仅可以用于导航栏目，还可以用于控制中心、广告、重要提示内容等。本节使用固定定位实现一个广告牌功能，关闭按钮和该按钮的功能已给出，当点击按钮时，广告牌会消失。现在给类名为”advert”的盒子设置固定定位属性”position: fixed”、设置”right: 0″、设置”bottom: 0″，此时广告牌的位置被固定在了视口的右下方。现在还需要将关闭按钮定位在广告牌的右上方，继续给类名为”x”的按钮盒子设置绝对定位属性”position: absolute”、设置”right: 0“，观察按钮的位置，已经被定位在了广告牌的右上方。一个简易的广告牌就设计完成了。

根据题目所示是对固定定位知识的考查，如果不清楚固定定位的可以看一下我对固定定位讲解的文章，上面已经给出链接，那么现在开始解题吧。附上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .advert {
                width: 300px;
                height: 200px;
                background-color: black;
                position:fixed;
                right:0;
                bottom:0;
            }
            .advert:first-line {
                color: white;
            }
            .x{
                position:absolute;
                right:0;  
            }
        </style>
    </head>
    <body>
    	<section class="advert">
            广告文案
            <button class="x">x</button>
        </section>

        <script>
            document.querySelector('button').onclick = function() {
                this.parentNode.style.display = 'none'
            }
        </script>
    </body>
</html>

每次做完题提交成功的话都会弹框配带音乐鼓励你，我很庆幸，因为我找到了牛客。