作业

作业标题：1221作用
作业内容：1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例，实现一个模态框
演示地址:https://php.gzj2001.com/1221/

作业代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1221作业</title>
    <style>
        .relative {
            /* 设置相对定位 */
            position: relative;
            /* 进行偏移 */
            top: 5em;
            left: 5em;
        }
        .old {
            /* 设置old为相对定位，便于absolute找到 */
            position: relative;
        }
        .absolute {
            /* 设置为绝对定位 */
            position: absolute;
            /* 距离他祖先的位置偏移  */
            top: 5em;
        }
        html {
            /* 为了展示固定定位的效果，将html拉长 */
            min-height: 100em;
        }
        .footer {
            font-size: 5em;
            width: 100vw;
            background-color: #666;
            /* 设置为固定定位 */
            position: fixed;
            bottom: 0;
        }
        /* -------------------- */
        /* 模态框演示 */
        /* 蒙版全屏覆盖 */
        .login {
            /* display: none; */
            background-color: rgb(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        /* 主体利用相对定位到中间 */
        .login .login-main {
            padding: 1em;
            min-height: 20em;
            border: 1px solid red;
            position: fixed;
            top: 5em;
            left: 30em;
            background-color: green;
        }
    </style>
</head>
<body>
</body>
<h2>静态定位是 默认的，和源码的位置一致 默认场景。默认使用条件 </h2>
<h2 class="relative">相对定位 是相对于自己本身原来的 位置进行偏移 应用场景，css阴影特效偏移？ </h2>
<div class="old">
    我是祖先
    <h2 class="absolute">绝对定位 相对于它的祖先中离他最近的‘定位元素‘的位置发生偏移 应用于页面绝对布局？</h2>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<button style="font-size: 10em;" onclick="login()">点我打开蒙版</button>
<div class="login" id="login" style="display: none;">
    <div class="login-main">
        <form>
            username<input type="text">
            <br> password <input type="text">
            <br>
            <button>login</button>
        </form>
    </div>
</div>
<div class="footer">
    我是footer 演示了固定定位
</div>
</html>
<script>
    function login() {
        document.getElementById("login").style.display = "block";
    }
</script>

1221 定位展示与利用绝对定位制作一个模态框

作业

作业代码

效果展示：

相关文章

1221 定位展示 与 利用绝对定位制作一个模态框

作业

作业代码

效果展示：

相关文章

1221 定位展示与利用绝对定位制作一个模态框