定位类型、模态框

定位类型

静态定位: position: static 默认,也就是文档流定位,元素的显示位置与源码顺序一致（不是定位元素）
相对定位: position: relative;相对于该元素在文档流中的原始位置进行偏移
绝对定位: position: absolue;相对于它的祖先中离它最近的”定位元素”的位置发生偏移（如果祖先元素中不存在定位元素,它就参考根元素(html)进行定位）
固定定位: position: fixed; 是绝对定位的一个特例,它始终相对于html定位

定位元素：只要这个元素中有position: relative;或者 position:absolute;就称为定位元素

模态框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模态框</title>
  <link rel="stylesheet" href="style1.css">
</head>
<body>
  <!-- 页眉 -->
  <header>
      <h2>百度一下</h2>
      <button>登录</button>
  </header>
  <!-- 模态框 -->
  <div class="modal">
      <!-- 蒙板。用来盖住后面的内容，使其透明化 -->
      <div class="modal-backdrop"></div>
      <div class="modal-body">
          <button class="close">关闭</button>
          <form action="" method="POST">
              <table>
                  <caption>用户登录</caption>
                  <tr>
                      <td><label for="name">用户名：</label></td>
                      <td><input type="name" name="name" id="name"></td>
                  </tr>
                  <tr>
                      <td><label for="password">密码：</label></td>
                      <td><input type="password" name="password" id="password"></td>
                  </tr>
                  <tr>
                      <td><button>登录</button></td>
                  </tr>
              </table>
          </form>
      </div>
  </div>
</body>
</html>

css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  background-color: #ccc;
  margin: 0.5em 1em;
  overflow: hidden;
}
header h2 {
  float: left;
}
header button {
  float:right;
  width: 10em;
  height: 2.5em;
}
header button:hover{
  cursor: pointer;
  background-color: #fff;
}
/* 模态框 */
/* 蒙板 */
.modal .modal-backdrop{
  background-color: rgb( 0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* 主体 */
.modal .modal-body{
  padding: 1em;
  min-width: 20em;
  border: 1px solid #ccc;
  background: linear-gradient(to right, lightcyan, #fff);
  /* 固定定位 */
  position: fixed;
  top: 5em;
  right: 20em;
  left: 20em;
}
/* 页面初始化时,模态框应该隐藏 */
/* .modal {
  display: none;
} */

定位类型

模态框

相关文章