当前位置：首页 > article >正文

【CSS】absolute定位的默认位置

article 2024/11/17 21:25:58

position: absolute; 属性会使元素脱离正常的文档流，并相对于最近的非 static 定位祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。

但是当top和left没有指定具体值时，元素的在上下文中的位置会在默认position: relative时应该存在的位置，不过由于脱离了文档流，层级会高。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div style="background-color: antiquewhite">
      <div style="width: 100px; height: 100px; background-color: red">
        <div style="width: 100%; height: 100%"></div>
        <div
          style="
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: blue;
          "
          ></div>
      </div>
      <div style="width: 100px; height: 100px; background-color: red">
        <div style="width: 100%; height: 100%"></div>
        <div
          style="
          position: absolute;
          width: 20px;
          height: 20px;
          background-color: blue;
          "
          ></div>
      </div>
    </div>
  </body>
</html>

查看全文

http://www.kler.cn/a/397784.html