定位

定位属性 position

position: static 此为默认值,为静态定位.就是没有定位;
position: relative 此为相对定位属性为(top,left,);
1. 仍在文档流中,所占空间不释放.其他元素不会随之移动,只相对原位置便宜;
position: abslute 此为绝对定位.不在相对于自身,而是相对于包含块
1. 绝对定位包含块的元素必须是”定位元素”,不能是 static;
2. 如果绝对定位向上找不到可定位的父级元素(position:不等于 static)的,就相对 body 元素;
position:fixed 固定定位相对于 body 定位(永远不动了),是绝对定位的子集只针对 body 等位;

案例登录页面

<body>
  <header>
    <h2 class="title">IANREN的博客</h2>
    <button onclick="document.querySelector('.modal').style.display='block'">
      登 录
    </button>
  </header>
  <div class="modal">
    <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
    <form action="" class="modal-form">
      <fieldset>
        <legend>用户登录</legend>
        <label for="emali">登录名:</label>
        <input type="email" name="email" placeholder="username@email.com" />
        <br />
        <label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
        <input type="password" name="password" placeholder="*******" />
        <button>登录</button>
      </fieldset>
    </form>
  </div>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    header {
      background-color: rgb(118, 216, 255);
      display: flex;
      padding: 0.5em 1em;
    }
    header .title {
      font-weight: lighter;
      font-style: italic;
      color: #fff;
      text-shadow: 1px 1px 1px #444;
      letter-spacing: 1px;
    }
    header button {
      border: none;
      border-radius: 0.5em;
      background-color: rgb(202, 67, 67);
      width: 5em;
      margin-left: auto;
    }
    header button:hover {
      cursor: pointer;
      background-color: rgb(250, 161, 17);
      color: white;
      transition: 0.3s;
      box-shadow: 0 0 8px #fff;
    }
    .modal .modal-form fieldset legend {
      background-color: rgb(212, 20, 20);
      padding: 5px 1em;
      border-radius: 4px;
      color: white;
      text-shadow: 1px 1px 1px rgb(246, 244, 82);
    }
    .modal .modal-form fieldset {
      padding: 1.5em 2em 0.8em 2.5em;
    }
    .modal .modal-form input {
      margin: 1em auto;
      background-color: rgb(248, 248, 248);
    }
    .modal .modal-form {
      position: fixed;
      top: 10em;
      left: 20em;
      right: 20em;
      width: 20em;
      height: 14em;
      background-color: rgb(167, 181, 230);
      padding: 0.5em;
    }
    .modal .modal-bg {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(0, 0, 0, 0.5);
    }
    .modal .modal-form button {
      border: none;
      width: 4em;
      padding: 0.2em;
      margin: 0.5em 1em 0em 7.3em;
    }
  </style>
</body>

固定定位做的登录页面案例

定位

定位属性 position

案例登录页面

更多相关文章

随机推荐