简介

        本文介绍CSS进行定位时使用 position:absolute （绝对定位）不起作用的问题。

问题复现

        需求：已有一个外层的元素（class为"container"），这个外层元素已经设置了margin，现在有一个元素（class为"test"），放在这个外层元素里边，想要基于这个外层元素的margin进行绝对定位。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>

    <style>
        .container {
            margin-right: 100px;
        }

        .test {
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="test">
        测试
    </div>
</div>

<script>

</script>
</body>
</html>

结果

CSS--解决position: absolute无效的问题_绝对定位


我们想要的结果：class为“test”的内部元素距离浏览器右侧110px。

现在的结果：class为“test”的内部元素距离最右侧只有10px。

原因分析

        默认情况下，所有的元素的position都是static类型，而absolute这个是相对于 static 定位以外的第一个父元素进行定位的。

        以上边的“问题复现”的为例：class为“container”的元素没有设置position，所以它position就是默认的static，这就导致内部的class位“test”的元素在找父元素的时候经历了如下步骤：


  2. 找它最近的父元素“class为“container”的元素”，发现position是默认的static，不满足条件，继续向上级找
  3. 找到body元素，发现body的position也是默认的static，不满足条件，继续向上级找
  4. 找到html元素，这已经是最外边的元素了，只能基于此进行定位了。

position的属性值


值



描述



​​absolute​​



生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。



​​fixed​​



生成固定定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。



​​relative​​



生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。



​​static​​



默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。



​​sticky​​



粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。



inherit



规定应该从父元素继承 position 属性的值。



initial



设置该属性为默认值，详情查看 ​​CSS initial 关键字​​。


解决方案

设置一下直接父元素的postion为非static的值（一般设置为relative即可）。

代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is title</title>

    <style>
        .container {
            margin-right: 100px;
            position: relative;
        }

        .test {
            position: absolute;
            right: 10px;
        }
    </style>
</head>

<body>

<div class="container">
    <div class="test">
        测试
    </div>
</div>

<script>

</script>
</body>
</html>

结果

CSS--解决position: absolute无效的问题_html_02


 可以看到，“测试”这两个字距离浏览器右侧的距离是110像素了。