博主信息

博文 19

粉丝 0

访问量 19490

专题推荐

定位的本质

定位属性 position 定位类型分为静态定位（static）相对定位(relative);绝对定位(absolute);固定定位(fixed)；
静态定位：position: static 默认的，也就是文档流定位，元素的显示位置与源码顺序一致。
相对定位： position relative; 相对该元素在文档流的原始位置进行偏移。占用原先的位置来进行定位。
绝对定位： position absolute;相对于它的祖先中离它最近的”定位元素”的位置发生偏移。会脱离文档流。
定位元素：只要这个元素中有position: relative;或者position：absolute;就称为定位元素。position:static 不是定位元素。

利用绝对定位做的五环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .box {
            width: 20em;
            height: 20em;
            border: burlywood solid 2em;
            border-radius: 50%;
            position: absolute;
        }
        .box:first-of-type {
            border: #0000ff solid 2em;
        }
        .box:nth-of-type(2) {
            border: #000 solid 2em;
            left: 20em;
        }
        .box:nth-of-type(3) {
            border: #df0808 solid 2em;
            left: 40em;
        }
        .box:nth-last-of-type(2) {
            border: hsl(59, 100%, 50%) solid 2em;
            left: 10em;
            top: 10em;
        }
        .box:nth-last-of-type(1) {
            border: rgb(94, 255, 0) solid 2em;
            left: 30em;
            top: 10em;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

显示效果

批改老师：

天蓬老师

批改状态：合格

老师批语：五球是个不错的练习

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML 语法元素属性

2020-12-08 23:28:19

定位 的本质

利用绝对定位做的五环

定位的本质