收藏
天蓬老师批改状态：合格
老师批语：
CSS中定位主要有5种：1、static：静态定位，标准文档流，系统默认使用；2、relative 相对定位，相对元素自己之前位置（默认位置），发生偏移量的定位，不脱离文档流，下方元素不会上移挤占位置；3、absolute 绝对定位，相对于定位元素（一般为父级元素）的位置，发生偏移量的定位，脱离了文档流，下方元素会上移挤占位置，父元素不能是static定位，否则采用根元素html作为定位元素，所以absolute一般需要和relative配合使用，父容器使用relative（相对定位）,子容器使用absolute（绝对定位）；4、fixed 固定定位，元素一直在视口中保持固定位置的定位，脱离了文档流不占位置，一般用于广告，客服，返回头部等元素；5、sticky 粘性定位，这里不作研究；
<body><!-- 页眉 --><header><h2>我的博客</h2><button>登 录</button></header><!-- 模态框 --><div class="modal"><!-- 蒙板 --><div class="modal-backboard"></div><!-- 登录框 --><div class="login-box"><button class="close">关闭</button><form action="" method="post"><table><caption>用户登录</caption><tr><td><label for="username">用户名 </label></td><td><input type="text" id="username"></td></tr><tr><td><label for="password">密 码 </label></td><td><input type="text" id="password"></td></tr><tr><td></td><td><button type="submit">登 录</button></td></tr></table></form></div></div></body>
<script>// 获取元素const btn = document.querySelector('header button');const modal = document.querySelector('.modal');const close = document.querySelector('.close');// 两个按钮，添加事件btn.addEventListener('click',setModal);close.addEventListener('click',setModal);// 事件处理函数function setModal(ev) {ev.preventDefault();let status = window.getComputedStyle(modal, null).getPropertyValue('display');modal.style.display = status === 'none' ? 'block' : 'none';}</script>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
