什么时候使用绝对定位

下面三个条件满足任何一个时，使用绝对定位：

元素出现在一个天马行空的位置
元素是否存在，不影响其他元素的排列
单个元素在某个区域内水平垂直居中

fixed和absolute的区别

fixed是绝对定位的一种特殊情况，它们的参考系不一样

absolute参考有定位的父元素
fixed参考视口(viewport)

注意事项

使用浮动或者定位之后，所有的元素都会成为block元素。
使用绝地定位后，元素本身的宽高都将是自动的。

元素居中的方法

css

.modal .play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;/*自身宽度的一半*/
  margin-top: -25px;
}

实践

demo1

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习1</title>
    <link rel="stylesheet" href="./css/demo1.css" />
  </head>
  <body>
    <img class="page" src="./assets/page.jpg" alt="" />
    <div class="modal">
      <img src="./assets/login.jpg" alt="" class="login" />
    </div>
    <div class="adv">
      <img src="./assets/r_code.jpg" alt="" class="qr-code" />
    </div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.page {
  width: 100%;
}

.modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}
.modal .login {
  width: 400px;
  height: 200px;
  left: 50%;
  top: 50%;
  position: absolute;
  margin-left: -200px;
  margin-top: -100px;
}

.adv {
  position: fixed;
  right: 0;
  top: 50%;
  background: url(../assets/r_dj.png) no-repeat;
  width: 165px;
  height: 250px;
  margin-top: -125px;
  text-align: right;
  padding-top: 145px;
  z-index: 1;
}
.adv .qr-code {
  width: 100px;
  height: 100px;
  border: 2px solid #d7a356;
}

demo2

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习2</title>
    <link rel="stylesheet" href="./css/demo2.css" />
  </head>
  <body>
    <div class="item">
      <a href="">
        <img src="./assets/cover.png" alt="" />
      </a>
      <div class="aside">
        <div class="number">118万</div>
        <div class="date">2021-11-23</div>
      </div>
      <div class="modal">
        <a href="" class="play"></a>
      </div>
    </div>
  </body>
</html>

css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.item {
  width: 230px;
  height: 140px;
  outline: 1px solid;
  margin: 30px auto;
  position: relative;
}
.aside {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  padding: 0 10px;
}
.aside .number {
  float: left;
}
.aside .number::before {
  content: '';
  /* outline: 1px solid; */
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url('../assets/icons.png') no-repeat -255px -63px;
  vertical-align: -5px;
}
.aside .date {
  float: right;
}
.modal {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
}
.modal .play {
  width: 44px;
  height: 50px;
  display: block;
  background: url('../assets/icons.png') no-repeat -190px -60px;
  /* outline: 1px solid #fff; */

  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -25px;
}

.item:hover .modal {
  display: block;
}

什么时候使用绝对定位 ​

fixed和absolute的区别 ​

实践 ​

什么时候使用绝对定位

fixed和absolute的区别

实践